This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "Code Demo: Flexbox Alignment" Lesson
[00:00:00]
>> Jen Kramer: If you go on ahead and step number six here. What I'm gonna do is set my justify content to center and then I'm gonna add an artificial number here. Generally speaking, once again, we don't do this with flex box but for demonstration purposes, I'm gonna add a height to these boxes of 400 pixels.
[00:00:20] Again not something you should do in real life, don't try this at home, but it's helpful for demonstration purposes, okay? Just see how this next properties are going to work, go on ahead and set that up. And just to show you the impact that that's had on the page, as you would expect, our boxes now had a bit of height and they're centered on the page.
[00:00:42] Okay, so once you have that in place, then here in my notes on point number seven, we are going to take a look at what's called align items. So align items, align the items on the cross axis. So remember our main axis in our particular example is the row.
[00:01:02] Across access is then up and down vertically. So these have the different values that we can align things vertically in space. Which is why I need to give this a little bit of height. So the values here again are flex start, flex end, center baseline and stretch. Stretch is the default I think, if I remember correctly.
[00:01:24] So let's try some of these other values. So, this is align items, so, we'ss go ahead and add that. Align- items and we'll give this a value of flex-start.
>> Jen Kramer: Okay, anyone wanna guess what's gonna happen with this?
>> Jen Kramer: We have any takers on what's gonna happen with Flex Start?
[00:01:56]
>> Speaker 2: Lines at the top of the access.
>> Jen Kramer: Lines at the top of the access, okay? Okay, so Flex Start, what this is doing is, remember we've set a height on these. What the flex box property has done here is it's preserved that height, so we have a bit of space between these.
[00:02:14] And reduce the size of the box back to just the height of the content here, okay? So that's what's going on. So if we said, and of course towards the top of the parent here, if I change this to flex-end, anyone wanna guess what is gonna happen?
[00:02:36]
>> Jen Kramer: If I change it to flex-end, what's gonna happen? So right now we have skinny boxes at the top, what's gonna happen now?
>> Speaker 2: It's gonna go to the bottom.
>> Jen Kramer: Skinny boxes at the bottom, right? Okay, so if we save that and we refresh the page, skinny box is at the bottom, okay?
[00:02:56]
>> Jen Kramer: So we said center.
>> Jen Kramer: Here's another thing that you cannot do any other way, really. So called holly grail lay out, right? Centering the horizontally and vertically space. So if you set a align items to center and we take a look at our page. There they are, okay?
[00:03:21] So we have them centred here. The Distance here on the top, the distance here on the bottom, everything is very, very nicely centered. Okay, we also have stretch.
>> Jen Kramer: So what stretch is gonna do is stretch these to fill up all of the vertical space. Stretch to fill all the vertical space.
[00:03:50]
>> Jen Kramer: Then, we have space between and space around.
>> Jen Kramer: Which, I'm not sure these are gonna look all that different here right now. So, there's space between and space around.
>> Jen Kramer: Yeah, so, space between and space around don’t look all that different in our example. But, as you would expect they work exactly the same kind of way as we showed vertically.
[00:04:26] So, it’s going to assign the space, if we had a larger container on the page, we'd see these move around a little more. Yes?
>> Kelly: Is align items only applicable to certain elements?
>> Jen Kramer: It's applicable to the children.
>> Kelly: Okay.
>> Jen Kramer: So the flex items.
>> Kelly: Okay.
>> Jen Kramer: We're putting on the parent and that applies to the distribution of the flex items.
[00:04:52]
>> Kelly: Okay.
>> Jen Kramer: Okay.
>> Jen Kramer: Yes, and Mark had a question.
>> Speaker 4: Kelly is asking, what if you didn't have a height?
>> Jen Kramer: What if you didn't have a height? You can certainly turn off the height and we can try space around and space between that way. But I think, once again, we're limited.
[00:05:14] Probably, what I'd have to do is put a, well I put the height on the UL, and the LI's are expanding to occupy that whole space, so sorry. Probably the best thing to do if you want to see that in action is to switch you're main access to be a column instead of a row.
[00:05:33] And then try playing around with the space around and space between properties.