Learn how to align lines on the 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 the box with the most content as you see here on the first row. And then once that's worked out, each row will get the same amount of extra height as the other rows to fill this space.
The next value is flex-start. On line 13 I'm changing this to flex-start, save and refresh. Now, nothing stretches, the boxes only take up as much space as they need to on the cross axis. However, since item two is a fixed height, all the flex-items on that row grow to match that height. That means the height of the other flex-items might change depending on what row they're wrapping onto. So, two is the only one that always has to be that height.
Another value is flex-end. Save and refresh. The browser just takes everything and moves it all down to the other end of the cross axis. But the align and the flex-items within each row don't change. On the other hand, if we go back to align-items which we looked at in the previous video, let's change that property to flex-end and see what happens. In the code on line 14 I'm gonna add align-items: flex-end, save and refresh.
That moves items along the cross axis within the row. If I change that to center, save and refresh, then the items in each row line up along the middles. Taking that out and going back to align-content, the next value is space-between. Save and refresh. Just like when we used space-between back on justify-content, here it also means that the empty space will be divided up between the rows.
Next we have space-around. Save and refresh. This also works similarly as it does on justify-content and then we have space-evenly. The space-evenly value makes equal space between the items as well as at the start and end of the axis.
- What is responsive design?
- The responsive page structure
- Accessibility and responsive design
- Using media queries
- Designing with CSS Grid
- Designing with CSS Flexbox