Join James Williamson for an in-depth discussion in this video Challenge: Controlling display order, part of CSS: Flexbox First Look.
In this chapter we've learned how the order property allows us to control the…display order of flex items within individual flex containers.…This gives us a powerful new tool when creating many types of layouts, especially…responsive ones. So in this challenge, our main objective…is to focus on how the order property works within individual flex containers…but, we also want to focus on how that can be leveraged for multiple screen layouts.…So in this challenge, your going to be working in the index.html file found in…the 04_04 folder as well the flex box.css. This where you're going to find all of our…instructions and you'll be writing the styles for this one, that can be found in…the _css directory as well. So before we get started with the…challenge itself, I would encourage you to go back to the index file and look through…the structure of the page again. Even if you feel pretty comfortable with…it because in order to really get control over the display order of objects or flex…items, you need to understand how they're structured.…
- 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.