Join James Williamson for an in-depth discussion in this video Solution: Aligning flex items, part of CSS: Flexbox First Look.
I hope you had fun with our controlling alignment challenge.…Alignment with flexbox can be a little tricky at first so, don't get frustrated…if you didn't get all of the steps right away.…Let's take a look at each of the tasks for the challenge, and then how I solve them.…So I have the index.html page and the flexbox.css from the 03_06 /finished files…folder opened up. And we're just going to take each of these…objectives one by one and take a look at the solution of them.…So our first objective was to go into the navigation bar and make sure that all the…linked items were aligned vertically within the nav bar.…
And you can see if I'm previewing the finished file in the browser that indeed…they’re doing just that, including the multiple line one, and they’re all sort of…vertically aligned within that, including search field as well.…It’s aligned as well. If I scroll down to about oh, I don’t…know, about line 37 or so, one of the things that you’ll notice is the unordered…list for the nav itself is a flex container.…
- 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.