This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "Code Demo: Flexbox Properties Explored" Lesson
[00:00:00]
>> Jen Kramer: So, where we're going to start here is in my notes. So the first group that we're gonna work with has to do with the flex containers. So, remember that's the ul? That's going to be the outside parent of all the li's that are inside of this, and we're going to add the following properties.
[00:00:16] So, to the ul, we're gonna start by adding a display of flex. So on the ul, go ahead and add display: flex.
>> Jen Kramer: [COUGH] That's all I want you to do, if you just do that much. And refresh your web browser. You have the easiest nav bar you've ever built in your entire life.
[00:00:38] Look at that, yes. We are already cheering in the classroom. Yay! Okay, so that's all we did, one property-value pair and this is what we get. And of course, if we start to shrink this down, you'll see, obviously we haven't done anything with media queries, and in this demo I'm not going to.
[00:00:59] So this is not necessarily set to wrap and go boxes on top of each other. So basically, this collapses until we've reached the maximum ability of each of these boxes. Each box is being held open by one long fake Latin word. And after that point we start to cut off the rest of the screen here, okay?
[00:01:20] So yay, yay flex box. Okay, so then that's what that particular property does.
>> Jen Kramer: Okay, then the next thing we're gonna do is number two. So we're gonna pick something called the flex-direction. So, flex-direction has a bunch of properties, row, row reverse, column and column reverse. Let's try some of those.
[00:01:46] So here on the ul, we're gonna say flex-direction. And row is the default value, so you've already seen row in action. So if we set this to, say, column,
>> Jen Kramer: [COUGH] And refresh the page, shockingly they stack on top of each other in a column, all right? And of course, you can shrink this page down, just like that, great, okay?
[00:02:21] Now the ones that probably interest you somewhat are the reverse ones, right? So if we say row-reverse,
>> Jen Kramer: As a value, and refresh the page. Notice that we now instead of going one to six, we go six to one. Basically it takes all of the content that you had on that row, and displays it in reverse order, cool, all right?
[00:02:46] And likewise if you instead of saying row-reverse, you said column-reverse,
>> Jen Kramer: You'll wind up with the thing displayed vertically, but six to one instead of one to six.
>> Jen Kramer: Okay? So far so good?
>> Jen Kramer: All right. Some of this stuff you kind of look at at the beginning and you go, why would I ever want to reverse the order of things in my row?
[00:03:13] But you never know, you might come up with a use for it at some point in time. Okay, the other thing that we can do, I'm gonna go ahead and set display flex, I'm gonna set flex-direction back to row when I go back to my code. And then we are gonna add a property called flex-wrap, so, the values for that are wrap, wrap reverse or no wrap.
[00:03:32] So as I say, here are the flex-direction is ordering those individual items, one, two, three, four, five, six. Flex-wrap is ordering the rows or the columns that are created. So let's see that in action. So I'm gonna go back to my CSS, I'm gonna set my flex-direction to row.
[00:03:53]
>> Jen Kramer: And I'm gonna set my flex-wrap, let's just go on ahead and say wrap to start with. And these are the default values that come with Flexbox, for the most part, right out of the box, this is the flex-direction of row and the flex-wrap of wrap. And so, if we look at our web page, it goes one to six, and you see here, that now my flex items are as wide as their content.
[00:04:23] When we run out of room, we place them next to each other horizontally. When we run out of room, we simply go onto another line, okay? So that's what the wrap property is doing here. And as we scrunch the screen down here, you see that we just go on to another line, just like that.
[00:04:42] Until we wind up with everything on one line. Yes, if you had that question, can I set the width for those flex items? Width, yes, you can. We're getting there, okay. But right now the width is determined by the content. And I should show you some other properties besides wrap.
[00:05:03] So if I said, wrap-reverse, anyone want to take a guess at what wrap-reverse is gonna do?
>> Speaker 2: It reverses the list.
>> Jen Kramer: So one to six, let's go six to one. Yeah, so if you save that and refresh the page, here we go. Sort of, right? Five and six, and then one, two, three, four underneath.
[00:05:26] So not quite six, five, four, three, two, one but we're ordering by the row. And as we scrunch down, see how it's reacting in real time, so four, five, six, one, two, three, okay? Six, four, five, one, two, three, weird, but that's what it's doing, okay? And then of course, anyone wanna guess what nowrap does?
[00:05:54]
>> Jen Kramer: It's a hyphen, right? No, one word, nowrap. Anyone wanna guess what nowrap does?
>> Speaker 3: It won't wrap.
>> Jen Kramer: It doesn't wrap. My gosh, can you believe it? Yeah, they're all one after the other. So actually the default value is row, nowrap. The default value is row nowrap, and we have a way of writing that.
[00:06:15] So, usually the way you see this displayed in Flexbox is you don't usually see the flex-direction property and the flex-wrap property. Usually, you see a property that's called flex row. And so that's point number four here, the property is called flex flow. This is short-hand that combines flex-direction with flex-wrap.
[00:06:37] So what we would do here is instead of saying flex-direction of row and flex-wrap of nowrap, we would simply say flex-flow row, nowrap. Those two things together take the place of the two things that we had written out previously. So that's the shorthand.