Check out a free preview of the full CSS In-Depth, v2 course:
The "Flex Container Properties" 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:

Deep dive into flex container properties of justify-content, align-items and align-content, by which you can align flex items along their flex lines, and flex lines within their flex container.

Get Unlimited Access Now

Transcript from the "Flex Container Properties" Lesson

[00:00:03]
>> Estelle Weyl: But wait, there's more. Ed Valenti is the one who did the Ginsu knives. Some of you may be too old to remember that Ginsu knife, but yeah, so there's more. So we'll basically set up a basic flex. So let's deep dive, now, into the properties that impact the flex container which is the parent.

[00:00:28]
>> Estelle Weyl: So there are ways where you control the flex items, which are those children, like all that things from bananas to xylophone, and can't remember what was A, those are all flex items. So the flex container is that box that they were all in, and that's the thing we put display flex on, and you can control the appearance of the children partially through some properties of the flex container.

[00:00:52] So there's the justify-content property, and it has many different values, including flex-start, flex-end, center, space-between, space-around, space-evenly. The justify content properties aligns flex items along the main axis, which in this case is from left to right. The align content is on the cross axis, which is top to bottom.

[00:01:17] And that's why I want to cover cross and main access, so you'd understand those terms. So here I have a display flex and,
>> Estelle Weyl: Only three items so they don't take up the whole space. So basically justify content property deals with what to do with the space if the sum of the widths or the heights, the main dimension of the flex items is not exactly equal to the parent container.

[00:01:50] So in this case, we have a lot of free space. But sometimes, remember when it was overflowing? What happens when it overflows? Does it start at the left, does it start at the right, does it go in the center? So these are, basically the justify-content says what to do with extra space or the lack of space along the main axis.

[00:02:13] So here we've put space between, which puts even amounts, it puts the first one on the left or at the cross start, I mean at the main start. So number one, always goes at main start which is important later on when you have too many items. When you have too many items, a is still gonna be in that corner, it's gonna grow out.

[00:02:33] It puts the second one at main end, and then it puts this equal amounts of space every time it adds ones in. So that's what space-between does. Space-around puts the same amount of space on each side of each element. So if there's 20 pixels on the left of a, there's 20 pixels on the right of a, and there's 20 pixels on the left of b, and 20 pixels on the right of b, and 20 pixels on the right of c and on the left of c.

[00:03:03] So that means the space between a and b is twice as wide as the space between the start and a. And that's ugly, right? Who here thinks that's ugly? So there's also a property called space-evenly, and that takes care of it, and puts the same amount of space on the outside than on the inside.

[00:03:23] Space-evenly is not in the flex box specification, it's in the positioning specification, or something like that. So if you don't see it in the flex box, it actually is, it's just they've stopped the flex box and they've added spacing and stuff like that, or whatever that specification is.

[00:03:43] So we might get other features. You have to basically click through the specification, which is why this took four years to write. It actually took more than that, cuz Eric had written the first and second and third edition, so he already had this much content, and we had to add that much more.

[00:04:02] Okay, so that's just, no, let's go a few more. There's center, which groups them all at the center. There's flex-start, which is main start, the start of the main access. There's flex-end.
>> Estelle Weyl: And I think that's it. Okay, then we have the align-items property which basically aligns items along the cross axis.

[00:04:30] We just learned main axis which is justify-content. Align does it along the cross axis. And similarly we have flex-start, flex-end, center, baseline and stretch. So here are three elements that I have. [BLANK AUDIO]. And they are all centered. That is not the default. The default, which is what you usually want, is stretch.

[00:04:57] There is a three column layout, right, with no work whatsoever. It's just display flex, and that's it, right? So align-items, center, we can also do flex-start which puts it up top. Flex-end, which puts it at the bottom. And when I mean bottom I actually mean in cross end.

[00:05:24] It aligns it in cross end, but I think bottom's easier to use. We already showed stretch. We showed center. So let me show baseline.
>> Estelle Weyl: Baseline is a little bit weird. But if you actually took something like a piece of paper and went across the whole thing. This is a another and header width are all perfectly aligned, cuz they aligned along baseline.

[00:05:52] So if I have more padding on the top of one or more margin on the top of one, it's a one on baseline. Which is kind of interesting when you have an aside on one side and a nav on the another side. And your main article, and you have an H1 and an H2 and an H3, you can align all three at baseline.

[00:06:11] Everything else will just flow in after that. But the thing is, that does not lead to a three column layout. I would rather stretch it, right, and then make sure that I made my top padding the same. But that is baseline. Okay, so I did say that I would have the visibility of collapse.

[00:06:39]
>> Estelle Weyl: It looks like visibility hidden. Doesn't it? Because that says align-items: center, that's center this way.
>> Estelle Weyl: The default is flex-start, so if I do justify.
>> Estelle Weyl: Okay. See, I look things up. If I do,
>> Estelle Weyl: Justify-content: flex-start; it doesn't change. Because the item is taking up its full width, it's basically disability hidden.

[00:07:25] Okay, then we have the align-content property, and the values of the align-content are flex-start, flex-end, center, space-between, space-around, stretch, and space-evenly. Doesn't that sound exactly like justify-content?
>> Estelle Weyl: But that only applies to multi-line containers, originally it was just within its one line, right? We were aligns thing within one line.

[00:07:49] Sometimes we have more than one line. So,
>> Estelle Weyl: So here we have the align-content property. And right now, the value is flex-end, so all the lines are at the bottom. Before it was just the flex items in that one line, we're at the bottom of their flex line, right?

[00:08:12] Here, all the lines are at the bottom of this container. So this container is 400 pixels high, and it could be anywhere. It could be at flex-start.
>> Estelle Weyl: Right, so all the lines are pushed to the top.
>> Estelle Weyl: We have stretch. And when I said the example doesn't work for stretch, it apparently does.

[00:08:38] Before, the yellow and red lines would not be in the right spot. So no, it doesn't, cuz these are actually taking up the whole thing. They're stretching. The yellow and red lines would actually meet. So when I say this example doesn't work for stretch, the lines are actually taking up the full width.

[00:08:54] It's just you can't see it. Then, we have baseline.
>> Estelle Weyl: And then, we have space-between
>> Estelle Weyl: And so you see here, the first line is at the top, the second line is placed at the bottom, and the third line the spaces evenly around both of those. So we can do space-around and then space-evenly.

[00:09:26]
>> Estelle Weyl: So the difference between this one and the other one, let me just go here.
>> Estelle Weyl: So I want all items at flex-start. I could also do a stretch,
>> Estelle Weyl: Right?
>> Estelle Weyl: And that makes all of them stretch. And then let's see what happens when I do stretch.

[00:09:54]
>> Estelle Weyl: So remember, I said the example doesn't work with stretch? It's the example's actually working fine with stretch, it's the yellow and red lines that aren't moving. So you see how a, b, c, d, and e go all the way from the yellow line to the yellow line.

[00:10:08] And f, g, h, i, j go all the way from the yellow line to the next yellow line. And k goes all the way from the yellow line to the bottom, because all the elements are stretched within their own line. And the align-content is stretched. So let's switch this to,

[00:10:31]
>> Estelle Weyl: Center. Okay, so here they're all grouped in the center. They're all stretched with the align-items property. But, all the lines are grouped in the center with the align-content property. Are you understanding the difference between align-items and align-content? I would be surprised if you were because this took me forever to wrap my head around.

[00:11:01] Just realize that the align-items is within its own line. Is it at the top, at the bottom, in the middle or stretched? And the align-content is the full line, like all the lines within the container. Are they all grouped at the top? Are they all grouped at the bottom?

[00:11:19] Are they all grouped in the center? Are they spaced out, or not? So let me put this back to flex-start, or I'm gonna put it at flex-end just to make life more confusing.
>> Estelle Weyl: And let me go back to the top.
>> Estelle Weyl: Align-content, so we did center, and then let's do space-evenly.

[00:11:43]
>> Estelle Weyl: So there's as much space between main start and the yellow line. No, that's cross start in the yellow line, between the red and the yellow line, between the second red and yellow line, and between the third red line and the end. Does that make sense to people?

[00:12:05] This is one of those things where I don't expect you to fully graph it. Hopefully, after we're done with grids you'll fully understand it.