Join James Williamson for an in-depth discussion in this video Solution: Controlling display order, part of CSS Flexbox First Look.
Congratulations! You've completed the last challenge in…Flexbox First Look. And as a result you've completed the full course.…Let's take a look at the solution file and how it compares to your own work.…So, I had the index.html and the flexbox.css file opened up from the 04_04…finished files folder. Alright, I'm going to go through each of…these objectives, step by step, and show you the solution that I came to, and talk…a little about why I solved it the way that I did.…And in this case, there may actually have been multiple ways to solve it, so if your…code doesn't exactly match mine, as long as it works and you think it's an…efficient way to do it, then that's just fine.…
Okay, so the first step was the side bar itself.…We wanted the side bar to appear on the left side and the featured article on the right.…So this one was a fairly simple solution. So, if I scroll down in my code, to say,…right here around line 67 or so. I can see that I have two classes here for…featured and side bar and all I'm doing is the order property here.…
- 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.