Direction & Wrap with Flex Flow

[00:00:00]
>> Jen Kramer: Is there anyone who wanna make any observations about those boxes for Flexbox? How big are these boxes?
>> off screen: Only as big as what's in them.
>> Jen Kramer: They're pretty much as big as what's in them, right. Okay, and so it doesn't stretch all the way across the page.

[00:00:18]
They're as big as what's inside of them. If we put some more text in here, blah, blah, blah, blah, blah, blah, blah. Okay, so they're just getting bigger and bigger with the text, right. Okay, so we have, it's sort of taken the space that it has here and it's just made a box around each one of these individual items.

[00:00:44]
Okay, the next thing we're gonna wanna do is we're gonna wanna declare something called flex-flow. And the flex-flow property is described here in the notes. And as it says here there's two values we're gonna specify for flex-flow. And they can actually be spelled out individually, flex-flow is the shorthand.

[00:01:07]
The actual individual properties are flex direction and flex wrap, combine those together you get flex-flow. And so for flex-flow, we're either gonna set this to a row or a column, all right. So by default flex-flow is set to a row, right. Let me just put row wrap here.

[00:01:29]
So nothing changed, that's sort of the default setting. We can also change this to a column instead. And guess what's gonna happen if I say column?
>> Jen Kramer: What's gonna happen if I say column?
>> off screen: Go vertical again.
>> Jen Kramer: It's gonna go vertical, boom. Okay, that's pretty easy. You want it to go in a row, you tell it to go in a row.

[00:01:50]
If you wanna go in a column, you tell it to go in a column. So far so good? Okay, that second property, I went ahead and put in wrap. There are some other options for that as well. So this specifies whether the boxes should wrap onto another line.

[00:02:08]
So we have the row going across the page. If our boxes got big enough and we ran out of room, what should happen then? Okay, so right now my window is such that we don't actually see wrap in action here. But if I make my browser a little bit smaller you'll see what happens, right.

[00:02:28]
The boxes just wrap onto another line, pretty straightforward, okay, cuz I have that set to row wrap. So what if I said row no wrap? What's gonna happen then?
>> off screen: To scroll if it's too small.
>> Jen Kramer: Gonna have to scroll if it, do you think we're going to get a scroll bar?

[00:02:49]
It's not gonna wrap, right, thus the name no wrap, okay. So if we go on ahead and make the screen a little bit smaller.
>> Jen Kramer: Look at that.
>> Jen Kramer: See how all those boxes are trying to resize? They'll actually wrap the text onto other lines. It's trying desperately to keep it all in one row,

[00:03:14]
>> Jen Kramer: Working very hard, we lost it. Okay, so now it's off the page, all right. So this means, this no wrap means that it's gonna keep on resizing those boxes and it's gonna try to keep everything in a nice row like this as best as it can. Make sense?

[00:03:34]
Okay, yes?
>> off screen: And would you scroll over, or it would just be off the page?
>> Jen Kramer: It would actually just be off the page.
>> off screen: So it's not viewable?
>> Jen Kramer: It's not viewable, okay. So most of the layout you're gonna do with Flexbox, you're probably gonna set Flexflow to no wrap, okay.

[00:03:52]
If you want it to wrap you're more than welcome to set it to wrap, but chances are in the assignment I'm about to give you you're gonna set it to no wrap, pro tip.