Check out a free preview of the full CSS In-Depth, v2 course:
The "Understanding Flexbox" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Estelle reviews that the essentials of flexible boxes are creating a flex container, defining the flex-direction, and wrapping of flex lines. Estelle also covers the concepts of the main and cross axes, to ensure developers fully understand the power of flexbox.

Get Unlimited Access Now

Transcript from the "Understanding Flexbox" Lesson

[00:00:03]
>> Estelle Weyl: Okay, so flex-direction property, this is the first property. We know how to create a flex container. The first property on that flex container that we're gonna cover is the flex-direction property. So you can say, row, row-reverse, column, or column-reverse. So because that makes no sense to you, I'm going to actually show you.

[00:00:25] So we have display: flex. And then we have this flex-direction: column-reverse. So we have box A, box B, and box C. And if you see, A is on the bottom, B is in the middle, and C is on top. And as much as I can be snarky, I'm not actually going to put things in reverse order in my code, it actually does go A, B, C in the code.

[00:00:48] If I do just column, it goes A, B, C. If I leave it off, it's A,B,C. This is the same as row, which is the default. Now this looks like columns to me, right? It's three columns. But it's all in one row. And when it was columns, it looked like three rows, but it was all in one column.

[00:01:16] So that's a little thing that took me a while to go like, why are they naming it this way? But now it makes sense.
>> Estelle Weyl: And then we have row-reverse. And so that makes it C, B, A. So the presentation is reversed. But if I were to use a screen reader, or if it had links, and I was tabbing through, it would actually not change the order.

[00:01:44] So the A would be hit first, then the B, then the C, no matter what I do, in terms of laying this out.
>> Estelle Weyl: So that's flex-direction. You have row, row-reverse, column, and column-reverse.
>> Estelle Weyl: So in this layout, right here, this navigation is displayed as row. And this thing right here is displayed as column, it has one, two, three.

[00:02:17] And the whole page has one, two, three, four elements, okay? So this is the hardest thing to explain, it's in this book. And it took me six weeks to write ten pages explaining main axis, and cross axis, and main direction. So the main axis, when it's on row, in left-to-right languages, is left-to-right.

[00:02:53] The cross axis is perpendicular to that, and is top-to-bottom. So who here does internationalization in right-to-left languages? Or in top-to-bottom languages? Does anyone have to do that? Okay, so realize that the power of flex is that if you just change the language, this changes. So if I was actually writing in a left-to-right language, or right-to-left language.

[00:03:21] And this said alpha, beta, and gamma, or no, alph, bed, gammo. If it said alph, bed, gammo, and it was in Hebrew, it would actually have it reversed. Row would have alpha in that this would be the same as, basically, inverted for you. So you don't have to worry about your CSS when you're doing internationalization.

[00:03:49] If it was top-to-bottom language, it would have the A, the B, and the C from top-to-bottom. Okay, so this right here is for left-to-right, top-to-bottom language. So the main axis in a left-to-right language, goes from left-to-right, if it's set to row. And the cross axis is from top-to-bottom.

[00:04:17] We have certain properties that will align things on the main axis, and certain properties that will align things on the cross axis. And then certain things that, when we have more than one row, will widen things on the cross axis, based on how many rows there are. So the first axis will, or the first row, will all be at the top, or all be centered within its axis.

[00:04:39] So understanding the main-axis. I'm gonna be using the main axis, and cross axis, cross-start, and cross-end, main-start, and main-end. So I want you to understand that this is what I'm talking about, it's basically the main axis is a cross. The cross axis is down, except for if I declared column.

[00:04:59] Then the main axis would have been up and down, and the cross axis would have been left-to-right. Okay, and next we have a flex-wrap property. So the default is nowrap. You can also say wrap, and wrap-reverse. So the purpose of the flex-wrap property is, should it all be on one line?

[00:05:26] Or can it wrap if necessary? So here you can barely see it. But off to the right, there's whatever starts with the letter n because I displayed flex. I did flex-direction of row, and I did flex-wrap of nowrap. I could also have just removed that cuz that's the default.

[00:05:51] If I just say wrap, it wrapped, right? What wrap-reverse actually does is it changes the cross axis from top-to-bottom, and switches it from bottom-to-top.
>> Estelle Weyl: Let's just do column first, with nowrap.
>> Estelle Weyl: Nowrap, right? And then I can do it, so it wraps. Okay so it started with A, and went B, C, D, E, F, G, H, in order, right?

[00:06:52] In the correct order, from left-to-right, top-to-bottom. So the main axis, right now, is top-to-bottom. The cross axis is right-to-left. If I change this to wrap-reverse,
>> Estelle Weyl: the cross axis has changed directions, and it's going from right-to-left, instead of left-to-right, does that make sense? Okay, so it seems really easy, and it is, because 99% of the time, you just do row, and wrap.

[00:07:32] And you're golden, right? Except for, it looks really ugly. All I have to do is say flex 10%, and I have 10, right? So it's gonna be easy.
>> Estelle Weyl: You don't need to memorize any of this. I look it up every time I use it, well, not every time, cuz I've now memorized it since I've written a book on it.

[00:07:54] But I assume you're not gonna write a book on it, don't.
>> Estelle Weyl: Cuz there's a little book of like, 120 pages just on flex, and half of that is in here. Half of it did not make it in there because the minutia, poof! Okay, so 90% of the time, this is what you gonna need.

[00:08:15] And so I'm gonna show you everything because you need to know it's possible. But just realize that this is what you wanna do. Okay, so in this case of the kitties, that's what I did, it's just wrapping, right? I wrapped it over multiple lines. And I used a flex that allowed it to shrink, and grow.

[00:08:40] Okay, so we covered flex-direction, and flex-wrap. You really do actually wanna use the flex-flow property which is a shorthand for the both, the flex-direction, and the flex-wrap. So here I could've just done row-reverse wrap, let me give it a height of 2, oops, height, 400 pixels, right? And then I could have done column,

[00:09:14]
>> Estelle Weyl: column-reverse wrap, right? A column-reverse, wrap-reverse. So it's the exact same thing, that way you remember to do both properties. And the people who wrote the spec, really, really, really want you to use the shorthand. Notice one of the features because I allowed them to grow, I did flex 10%.

[00:09:40] If I did 0, 0, then it would not grow. Okay, flex-flow, here's another one if you wanna play with it just for 30 seconds while I drink some water. And then we'll get back to it.