From the course: Responsive Layout

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Aligning items on cross axis

Aligning items on cross axis - HTML Tutorial

From the course: Responsive Layout

Start my 1-month free trial

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…

Contents