Join James Williamson for an in-depth discussion in this video Flex flow and display order, part of CSS: Flexbox First Look.
On the surface, the order property seem pretty straight forward.…However, when the flex flow properties change, the display order will often…change too, and sometimes with very unintended side effects.…So I want to illustrate this, by working with the flow-order.htm which you can find…the 402 directory. Just to give you an overview of what's…going on, if I scroll down into the structure.…You can see once again we have all of our boxes.…We have four of them down there, and they have classes one through four.…And currently we've got class selectors that are controlling their display order…through the order property. And you'll notice that for the first one…is four, and then we go three, and then we go one, and then we go zero.…
So, based on the values that we're passing here, and if you're wondering why I…skipped two, just because. Now so it doesn't really matter just to…kind of illustrate the fact that you don't have to go in sequence you can go out of sequence.…And there's nothing wrong with that, it'll take the value itself.…
- 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.