Aligning items on cross axis

- [Instructor] The next property is align items which aligns your flex items along the cross axis which is perpendicular to the main axis. This only applies to one row of items. In the next video we'll look at what happens if you have multiple rows because you have flex route turned on. Now looking at what we have on our page the main axis is a row, left to right, so the cross axis will be top to bottom. Align items has slightly different values than justify content even though they do something similar. The default value is stretch.

I'm going to the code on the container element on line 12. I'm going to add align items, stretch, and save and refresh. And nothing changes because that's the default. Stretch makes each flex item stretch to fill the entire cross axis. This only works though if the items have a minimum height or no heights because that allows them to stretch. If I give item one a height, I'm gonna go on line 14, item one, and then height, 200 pixels, save and refresh.

The other flex items are stretching, but box one doesn't stretch. Our next value for line items is flex start. So I'm gonna change stretched to flex start, save and refresh. That's what you see here with the items aligned to the start of the cross axis, or the top of the container in this case. We gave item one a specific height, that's it's height, and it doesn't change based on align items, it's still 200 pixels.

The other items don't have a height so they're only as tall as they need to be to contain their content. If we change the line items to flex end, I'm on line 12 of the code, save and refresh, there'll be a line to the end of the cross axis. Next we have center, so I'm changing flex end to center. Save and refresh. And now they're aligned in the center. You do need to note that the content isn't centered top to bottom within the boxes. So if you wanted that to happen also, you'd have to do it separately.

The last option for align items is baseline. This aligns the flex items so that their baselines align. The baseline is the bottom of text. In this example, all the flex items have the same size font so it's not going to do anything. If I change center to baseline, save and refresh, it's just going to act like flex start. But this will come in handy if you have different size fonts in the flex items. We're going to go into the code and add a font size for several of the items.

Let's say item one, we're going to give it a font size of two ems. Then after that, item three, we'll give it a font size of three ems. And then item five, a font size of .5 em and save and refresh. Now you can see that the size of the font affects where the letters are inside the element because the text is given a certain amount of line height depending on the size of the font.

The flex items have all been placed so the baseline of all the letters line up. You probably wouldn't need to do this if things were actually in separate boxes like this, since it's kind of strange looking, but you might use it if you have different sections of content next to each other with different fonts or font sizes and you wanted them to line up.