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 lines on cross axis

Aligning lines on cross axis - HTML Tutorial

From the course: Responsive Layout

Start my 1-month free trial

Aligning lines on cross axis

“

- [Instructor] While align-items applies to each row of flex items, align-content applies when you have flex wrap turned on and you want to align multiple rows of items. First you need to know that since align-content only applies to wrapped flex items, if you don't have flex-wrap set to wrap or wrapper verse here there aren't enough flex items to wrap, then this property won't do anything. First, let's change our flex-wrap to wrap. I'm going on line 12 of the code under the container element flex-wrap: wrap, save and refresh and our content is long enough that the flex-items wrap onto a second line. The default for align-content is stretch, so that's what you see here even though we haven't defined it in the CSS. I'm going to add that on line 13, align-content: stretch, save and refresh and nothing happens since that's the default. Stretch means the box is stretched to fill the cross axis. If the boxes on one row have different amounts of content, they will all go to the height of…

Contents