Container Flexbox Properties Demo

[00:00:00]
>> So let's start putting this into Flexbox and I'm going to start here with the UL. The important thing to remember is that the UL is going to be the parent or the flex container, all right. So that is the outside box. All of these LI's there are children of that UL.

[00:00:18]
So the LS are flex items. The UL is the flex container or the parent, and that's gonna drive a whole bunch of these properties. So we'll start here with the UL and we'll set it up to display flex, and immediately that is going to put all of our boxes here on one line Just like that.

[00:00:46]
And you see here that my box has some height set to it because I set my UL to have a height of 500 pixels and so there it is and now all my boxes are here all together in one line. Make note of the fact that the boxes are different sizes.

[00:01:01]
How big are they? I set a min width of 100 pixels and I set a height of 100 pixels and so the minimum size of these boxes is going to be 100 pixels by 100 pixels and I did that just so that you would be able to see this a little bit better.

[00:01:17]
If you take that out the min width and the min height here you'll see even more strikingly that these boxes can get quite narrow. They're as big as their content by default if you don't have a min height and a min width set, and that is their flexible boxes so that they are gonna try to cram themselves into as little space as possible.

[00:01:40]
The next thing to take a look at is our flex direction. And this property you may not see us that much because many people will put it with flex flow but flex direction and flex wrap are the two that form the flex flow property. So here we can have a direction of row, that's what it is by default.

[00:02:05]
We won't see any change when I put that in. We can change that to column and everything will stack on top of each other at that point. We can also reverse these. So we could say row reverse, And we'll wind up going from six to one instead of from one to six, okay?

[00:02:27]
Likewise, you can do a column reverse, I'm gonna reset this just to a regular old row and then let's look at flex wrap. This has to do with our boxes when the screen gets too long, what are we going to do to our boxes? Are we going to cut them off?

[00:02:46]
Have them extend past the edge of our container or are we going to wrap them onto another line? And so often this is set to wrap by default. So you see here I've now wrapped two boxes on to the next line because my row gets very, very long.

[00:03:04]
You could also set this to wrap reverse. So notice that this is reordering things here on the page. So our first row goes down to the bottom five and six, go more towards the middle of the screen. And we can also go to now wrap which is our default value no wrap will cram everything onto the same line.

[00:03:34]
And as I said most people will write this simply as flex flow and then you'll have to put in two values row wrap. Generally speaking row wrap is what you want for responsive design.
>> Why is there's a gap between row one and the next row?
>> Why is there a gap between the row one to four and then five and six?

[00:03:58]
Great question that has to do with the next set of properties that I wanna be talking about here in just a few moments, so that has to do with the cross axis. So remember here, our main axis is horizontal, the cross axis is vertical. We haven't started to address those vertical properties yet.

[00:04:18]
So that's what's going on there.
>> Is it possible to wrap a limited number of items like I wanna wrap item number four, five and six without increasing or decreasing the size of item one, two, and three?
>> Just put four or five and six on another line and not one, two, and three.

[00:04:36]
Yeah, potentially you could do that. You would wind up having to probably adjust your HTML a little bit you could put one, two, and three in a row you could put four, five, and six in a row that's one way of doing it. You could set one, two and three to have a flex basis, which I'm gonna get to here in just a second, that would add up to a hundred percent.

[00:04:57]
That would automate automatically wrap four, five and six on to the next row. So there's a couple of different ways of doing that. All right, so before we leave the parent here, all of you are starting to ask questions about some of the other situations here. Let's move on here to the justification of any sort of extra space that we have in between ourselves here.

[00:05:18]
And to demonstrate that I'm gonna go back to my LI let me just comment out this min width here for the moment and the height ,so that you can see that we have a row here, so we have some extra space over here on the side and so now let's add to this Are justified hyphen content so this has to do with how we're going to distribute this extra space.

[00:05:51]
So if we set our justify content to flex hyphen start, that is the default value it'll push all of our boxes over to the left side of the screen giving us space over on the right hand side of the screen just like that. If we go to flex end shockingly it's going to push all of our boxes to the right side of the row and give us space on the left side of the row, center is always a good one, center will put all of our boxes here in the middle.

[00:06:24]
Notice that in all cases here we haven't actually put any space in between the boxes. So that's these next three values that am gonna go through and these are the three that get confused all the time. So the first one is space around. So space around says we are going to let's just talk about one and two here.

[00:06:50]
I am going to put a space here of X. So the browser has done some math and it we have so much space, we have so many boxes. We're gonna take that space and we're going to put a little bit of it on each side of the box.

[00:07:04]
So this space right here in between the border and the edge of box one, that space is x. I don't know what the value is. It doesn't matter about the browser did the math for me. Here now in between one and two, the space is 2x. Because I have space on the right from number one and space on the left from number two.

[00:07:28]
So what you wind up having is half the space on the edge before box number one and half the space on the edge over here after box number six and then in between each of these boxes, that is twice the space, okay? Because you have the two individual spaces coming together there in the middle.

[00:07:50]
So that's what's going on with space around. The one I find that's more useful than that is space between usually your designer friends will be happier with this as well. So what this is going to do, is it's basically justifying the boxes. It pushes up the box one all the way to the left edge.

[00:08:11]
It's going to push box six all the way over to the right and it will evenly justify the space in between all of the boxes in between. So that's usually very helpful to work with. I find that really great to work with, particularly when we get to our grid system, which we'll talk about next.

[00:08:32]
And then the last one here is a more recent value It's well-supported by browsers right now. If you wanna use it and you have to support some older browsers, you may wanna double check to make sure it's supported by those older browsers and that is spaced evenly. And shockingly, that puts the same around amount of space around on between the edge here and box one.

[00:08:58]
The same amount of space between boxes one and two and so forth, just as you would expect for space evenly all the way across here. So this is another very useful one that designers like because the spaces are divided up evenly usually space around is the one that they are not fond of because they think it looks a little bit awkward.

[00:09:18]
Let's now get to the cross axis. So we've talked about all this various kinds of alignment here on the main axis. This is all the row and dealing with the spaces here on the row. So to go to some of your questions from earlier, what about here on this cross axis?

[00:09:34]
And that's gonna start here with align items. So I'm gonna reset my justify content here to center and then we're gonna add the property called align items and so this is gonna control our spacing here within the row and in fact I'm gonna bring back to my mean width and my height.

[00:09:58]
So right now as you see here, as somebody asked earlier, we have boxes five and six here wrapped on to the next line here in the middle, and this is part of this align items type of thing. So here, if we said Flex-start. Then what we have here are all of the boxes pressed up to the top of the area that we have available here to us.

[00:10:34]
So, what we've got is, a row is wrapping onto another line, everything is centering because of the justify content of center and then everything is pushed up towards the top because of flex start. If I set this the flex end what's gonna happen? Yep, it pushes it all the way down here to the bottom.

[00:11:05]
So what's happening here? Remember I've got a width and a height that are set artificially here on this UL. So my height is giving me this room that I can see this whole thing, moving space. So that's gonna push that down to the bottom there. We can also say a line items in the center.

[00:11:26]
So the center this is what a lot of people talk about when they talk about putting something in the very center of a screen, justifying content center align items at the center puts everything centered very nicely inside of that box center to the row centered vertically. That's what's happening there.

[00:11:47]
We can also say baseline. Baseline all this case is just pushed it back up to the top of the screen, and then stretches the last one. And that's also doing the same thing here. Okay, so the last one I want to tell you about is the align content and this is going to align elements within the particular space that we're talking about here and I think this goes to the question that somebody was asking earlier aligned content.

[00:12:40]
Center align items center and aligned content. So now if I say flex start. This pushes everything all the way to the top without the space in between. So the person who was asking about the spacing between those elements, this is how you get rid of it with this align content.

[00:13:04]
So everything is pushed up to the very top of this particular box. We also have flex end which of course pushes it all the way down to the bottom of the box. And we have center. So if you wanted everything smashed in the center without the big gap in between those particular rows, that's what the center is.

[00:13:29]
So three centers in order to make that happen. And we still have all the options of the space. Space between, space around and space evenly. So Spaced between, Pushes these all the way to the top and bottom of the box, space around,
>> Gives us as I said before x x amount of space above and below to x in between and space evenly spaces the mall evenly in space.

[00:14:15]
>> So we can say that align items we use in case of columns.
>> Well it depends on main axis and cross axis so in this particular case yes that would be a line items would be for the cross axis so that would be the columns.
>> I didn't understand the use of baseline and stretch value what exactly can we use it in?

[00:14:38]
Isn't it similar to the default value?
>> Yes, exactly. So those are indeed similar to the default value. And so those become useful if you reset them in one part of your layout and you wanna change it back in another part of the layout. So it's always helpful to know what those defaults are.