Join James Williamson for an in-depth discussion in this video Aligning multiple lines, part of CSS: Flexbox First Look.
Most of the time, you're going to be controlling flex items in a single…direction, or along a single axis. However, there are many times when flex…items can actually wrap to multiple lines. When that happens, you can control cross X…alignment of those lines with the align-content property.…(LAUGH) Let me say that again. So the align-content property allows us to…control alignment of those multiple lines that you get.…When you tell flex container to wrap, so you can see we've got a couple things…going on here. Structurally, we have a lot more boxes,…you can see we have about nine of them. And if we go into the flex container…property itself, it's set to row. And notice that the wrap property is set…to wrap. So now we're going to have a multi-line,…meaning if the flex items don't fit within the container, they'll wrap to another line.…
Notice that we've also got justify-content already turned on.…Remember justify-content aligns along the main axis.…So what this is doing is space-around. So what we would expect to see in the…
- Reviewing Flexbox support
- Defining elements
- Controlling element flow
- Wrapping content
- Defining display ratios
- Aligning single and multiple items
- Nesting flex containers
Skill Level Beginner
1. Flexbox Basics
2. Element Flexibility
Defining display ratios3m 14s
3. Controlling Alignment
4. Element Display Order
Additional resources3m 59s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.