Join James Williamson for an in-depth discussion in this video Nesting flex containers, part of CSS: Flexbox First Look.
It's important to note that flex items can also be flex containers.…This allows you to nest as many flex containers as your layout or your…interface requires. The good news, at least in terms of…display order which is what we're focusing on, nesting those flex containers doesn't…really create any additional complexity as each flex container has its own unique…display order. To illustrate that I'm going to be working…in the Nesting.HTML file found in the zero four, zero three directory.…And before we get into writing the display properties styles I want to go down and…look at the structure of the page because it's changed a little bit.…
Okay, we have our flex container as normal and inside that we have one, two, three,…and four boxes. However you're going to notice inside box…number two right here we have this new section showing up.…Notice that this section is also a flex container.…It has a class of nest applied to it. And then we have four boxes inside of that…and each of those individual boxes have classes as well.…
- 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.