justify-content & align-items

[00:00:00]
>> Now, once we have our pages that are being laid out, we have some additional layout considerations, as you see right now, we have 1 to 4 on the top 5 and 6 that are in the middle somewhere. There's big gaps between these things, there's no gaps between other elements that are here on the page.

[00:00:19]
So why this and how do we make it different? That's what these next properties are all about. So I'm going to set my display to flex my flex-flow to row wrap. And the next property we'll look at is justify content. So here for justifying content, this is going to determine the distribution of all these little flex items, the li's, in this case, within the container for the parent, this case, the ul, and they're so-called on the main axis.

[00:00:53]
What is the main axis? Anyone wanna take a guess at what the main axis would be?
>> Center the right.
>> In this case it's the row, because we've displayed flex-flow as row wrap, if I said this as column, where would justify content apply now. On the column, okay?

[00:01:17]
The main axis is the one that you are specifying Justified in fle-flow, all right? So justify content here, we can say something like, these are all the fun ones, all the fun properties here. We could say flex-end, that is gonna send us all the way over to the right so now we have right aligned items.

[00:01:46]
Guess what center is going to do? [INAUDIBLE].
>> Yeah, there we go, center all of our items in space, okay? And of course flex start as the default property and that in this case, in our left to right world, it's gonna smash everything over to the left hand side.

[00:02:05]
So those are the easy ones, start and center. Then we have the ones that like, make everybody think. So one of my favorite ones of those that remain is space between. Anyone want to guess what space between does?
>> It's gonna put space between each of the.
>> Yeah, so this is going to take all the boxes, shove them all the way over to the left and the right, and any extra space will go in between each one of those boxes.

[00:02:35]
So space between. So notice, 5 and 6, because there's only two boxes in that row, there's a lot of space between them.
>> So it's like all justify.
>> So it's all justified left and right. And any of that extra space which there isn't much on that first row that will be placed evenly between each one of those boxes.

[00:02:57]
So space between is generally the one to use for like laying out nav-bars, occasionally you wanna use center, but it's usually either space between or center are the two that are going to work for laying out a nav-bar. These other ones are also useful, space evenly is another one.

[00:03:16]
Anyone want to guess what space evenly is going to do.
>> Now, even at the space
>> Even at the space on all sides, that's the key on all sides, so if I say space evenly notice that box number 1 is not quite all the way to the left and box four is not quite all the way to the right, see that?

[00:03:43]
So this is the downside to space evenly, you might think, well, why wouldn't we always use that? Because your designer friends are gonna get mad that the edges of those boxes are not lining up correctly, that's why. So space evenly looks great just like this, but if you're really trying to align with other items on the page, you probably want space between.

[00:04:02]
Notice again that boxes 5 and 6, they are spaced evenly. That space to the left of 5, to the right of 6, and in between those boxes is all the same. Okay, then we have the mind-blowing one, good times, is space around. And I recommend just avoiding this one because again this is one of the ones that I've never really needed to use in real life, does anyone want to try to explain what's going on here for space around

[00:04:29]
>> The space around it is all even so when you have two things like 5 and 6 like they add up together to make it look like the space in between them is twice as much.
>> Exactly, exactly. So, here we go. The space you can kinda see it right here at 1 between 1 and the edge of its box and 4 and the edge the edge of its box, okay?

[00:04:54]
Right there, that is the space. So that's 1x, the space in between here is 2x. So we have a space at the edge of 3 and the space of the beginning of 4, all right? And likewise down here for number 5, the space is right here and right here and as James was saying, right in between, we have 2x, twice that space in between.

[00:05:24]
So the hard part here is that, of course, things don't line up on the edges correctly. It makes your designer friends mad, and it's very confusing to remember that we've got 2x between our boxes. And so, this is one that I just typically avoid using when I'm working with flexbox.

[00:05:42]
Space between and center are often the two values that I use most. Any questions on that? Okay, cool. So I'm here to set my justify content now to center, and I'm going to give you the next property. This one is align-items. Now, what is align-items do, we're justifying our content.

[00:06:12]
Aligning items just sounds like synonyms, doesn't it? [LAUGH] it means exactly the same thing, but we've just used different words. So what is align-items mean and how is it different than justify content?
>> Stuff inside the boxes?
>> It's not anything inside the boxes
>> Instead of like, beginning in the end of the row or like the, in this case the law left and the right, it's top and bottom.

[00:06:40]
>> Exactly, so this is the so-called cross axis. So whatever you have here in flex up flow, that's our main axis, to the verge of the row, align-items is the cross axis, in this case the column, up and down, okay? So how are we aligning these things in that Cross-space.

[00:06:58]
So if I said align-items center, where are my boxes going to go? Anyone wanna make a prediction?
>> In the middle.
>> In the middle. So this is one of the favourites for a lot of people justify content center align-items center to try to align things in the middle of the page, okay?

[00:07:21]
Yeah.
>> So, this is the first time we've started doing any up or down adjustments.
>> Okay.
>> I noticed that like 1 to 4 are a specific amount of space away from 5 and 6.
>> Yeah, yeah.
>> What's the default there that it's falling into.
>> I think what you'll see is this is 1x again above these boxes and 1x is here and this space in between is 2x.

[00:07:48]
>> I'm sorry, I mean even before we added the align-items and still had a bunch of space in there, think. You remember now?
>> This space, what's going on here? I think this space and this space are the same. So it's basically taken, how much room do the boxes take up?

[00:08:12]
Take whatever space is left over and stick it in between evenly.
>> It's because we've hard-coded the height of the ul.
>> Yes.
>> 500 pixels.
>> And that's part of it too. We hard-coded the height of the ul and we hard-coded the heights of our lis. And the only reason to do that ever is to do a demo like this, so that you can actually see what's going on.

[00:08:34]
If I didn't hard-code these, it would be very difficult to see what was happening, yeah. Okay, so there's some other options here for align-items that may be useful to you. I showed you center stretch is always a good one. What is stretch gonna do? Fill the space. Cool, probably cause I have a hard-coded.

[00:08:58]
>> The high.
>> High is hard-coded, what happens if I take the high out? There we go, that's what we would expect, okay? So stretch is going to stretch them unless you have the high hard-coded in which case A shame on you and B, [LAUGH] it's not going to do what you expect.

[00:09:17]
There's some other ones that are here, you're welcome to experiment with them, so flex-start, flex-end, space between, space around, space evenly. I don't feel like I really need to go through all of these, they're the same kind of values that you just had for justify content. Now we're gonna look at them in the space.

[00:09:32]
Make sense? Okay, so all of these properties obviously, cuz they're on the ul are all properties of the parent, okay? Let's take a look at the children now. So what we're going to do for the children, let me just pull up the HTML here. We have two children that have a class of flex2, okay?

[00:09:57]
Just so that you know that, that is a thing. And so what I can do here is if I said, flex2, my class of flex2, let's say border 2 pixels, dotted blue, and it's gonna put a blue border around this two items so that you know what they are.

[00:10:20]
I'm gonna make it fatter, 5 pixels so you can see it, okay? Those are the two items that have that class of flex 2. Now what we can do is we can change the order of things here. So right now these, of course are in the order that they appear in the allies 1, 2, 3, 4, 5, 6 but we can also reorder things here in space.

[00:10:40]
So we could say, for example, order: 1;. That's actually going to move our boxes to the end. All of the boxes that have that class of flex2, they will go to the end. Weird, right?
>> Start at 0?
>> It starts at 0. So by default everybody has an order of 0.

[00:11:06]
Sometimes we can't like humans and sometimes we can't like engineers. I'm sorry, I wish we could just count one way all the time. But, so anyway, so those boxes up there are zeros and this is ones and that's why they come later. Okay, you could make those numbers anything you want.

[00:11:24]
If we make this -1, they move to the start, as you might expect, because -1 comes before 0, all right? Now another property that we can add here is flex-basis. And flex-basis is one that people always forget about. You always think about width, right? So if I said for my lis, if I said the width was 25%, there we go.

[00:11:59]
So pretty, very gridlike, yes? But we have just killed all of the flex in our flex boxes. Because with width, those boxes will never be 24.9%, they will never be 25.1%, they will always be 25.00000%. They actually don't flex at all even though we're working with percentages. So flex-basis is the appropriate dimension to work with for quote with, all right?

[00:12:32]
And the reason why is because flex-basis is we're going to make these 25% kind of, kind of. So sometimes they may be a little bit less, sometimes they might be a little bit more, all right? And again, this is a little bit artificial because I've got some stuff that's hard-coded in here.

[00:12:51]
So anytime you feel compelled to reach for width and you're working with flexbox, use flex-basis instead.
>> So if Flex-direction is at column and then flex-basis will be the height?
>> Yes. Flex-basis, applies to the main axis, yes. Not the cross axis.