flex-direction & flex-wrap

[00:00:00]
>> So the next thing that I'm going to do here is a big demo of all of flex boxes properties. People have found this to be really helpful in the past. So I'm going to continue to include this. If you click on the code pen here, all right, so here's what we've got.

[00:00:17]
We just always start with the HTML. And what you see here is that we have unordered list. There's our unordered list. It's a ul, a bunch of lis. Shockingly, flexbox is just like grid in that the parents and children determine all of the relationships inside of Flexbox. So, when you have an unordered list, we need to be concerned with parents and children.

[00:00:43]
Obviously, the UL is the parent. The LIs are the children in this particular case. And then I have some, just some basic styles here. Again, this is just putting on the border box. It's making some modifications to the font and then I've added some sizing, some colors. That's all that's located here.

[00:01:06]
And the notes that I'm going to be reading from are down here in JavaScript is one giant comment. So this is the types of properties that I'm going to be working through if you wanna refer to all that giant comment down here. JavaScript box, cuz we're not using it, because will use it for some directions, okay?

[00:01:29]
So the very first thing that we would do, is we are working with Flexbox here. I have my ul that that is going around all of this each of those numbers, some of them have text, those are li's. And I am going to start by setting this up with a ul and I'm going to say display flex.

[00:01:52]
Just by doing that, you will see that you will immediately get a layout for the webpage. This is not true with Grid. Grid will not give you this layout immediately, but Flexbox will. And it's scrolling a little bit off the page here in my browser, and that has to do with the fact that I have this set to affixed width at the moment.

[00:02:13]
The blue box continues to be the ul, the red items are the li's. Okay, the next thing you can do is you can set up a flex-direction. And you may be familiar with some of these. By default, the direction is row. If you put in row, nothing is going to happen.

[00:02:38]
Did you know about row-reverse? Okay, what do you think row reverse is going to do? Anyone want to take a guess? Reverse it, right? So it's gonna go from 6 to 1. So there we go, 6 to 1, cool. Why would you wanna do this? I don't know, but it's kind of cool.

[00:03:00]
>> [LAUGH]
>> [LAUGH] okay? We can also make this go up and down instead of going by row because remember Flexbox is one direction only. So you pick rows, or you pick columns as opposed to grid which has both. So we could say column and we're gonna get what we had before, okay?

[00:03:21]
Guess what column reverse does?
>> 6 to 1.
>> 6 to 1, going up and down the page. So there we go. That's column reverse. Any questions on that?
>> See that being helpful if you think. You're trying to just sort and you want to like a reverse order.

[00:03:44]
>> Yep, if for some reason you wanna reverse order, here it is. Yep, honestly, I've never used this in a real website before. I really only ever use row. [LAUGH] the next one is flex wrap and flex wrap has to do with how Things are going to wrap onto another line or wrap onto another column.

[00:04:05]
And there's a bunch of values for this. So we could say wrap. And in theory, this is going to wrap onto another line. So we ran out of room here for 5 and 6, so they've moved onto another line. In this particular case, the width of 2 and 4 are determined by their content.

[00:04:27]
And since they have some extra text there, they become a little bit bigger. That made 5 and 6 push out of the way. By default, this value is no wrap. And that means everything has to fit on that same row, which means that our text is gonna wrap in order to make room.

[00:04:46]
Make sense? Okay, And we also have one other because you know, why not? This value is wrap reverse. Does anyone want to guess what rap reverse is going to do?
>> It's like when you take the record and you go.
>> Yeah, basically, yep, you got it. So if we say wrap reverse, that's gonna put 5 and 6 on top and it's gonna put 1 to 4 on the bottom.

[00:05:20]
Again, I have never used this in a real web page, but hey, it's there, cool, okay? There is a shorthand for both the flex-direction and the flex-wrap property. This is the one I tend to use, which is flex-flow. So you could say something like row-wrap. And so that's just combining those flex-direction and flex-wrap properties.

[00:05:49]
If you feel more comfortable spelling them out individually, you're welcome to do that. If you like to shorthand, you can use that. It makes zero difference to anyone except for you programmers who want to have something done in a very specific way. So that's the whole purpose of that.