Join James Williamson for an in-depth discussion in this video Challenge: Aligning flex items, part of CSS: Flexbox First Look.
It's time to put what you've learned about aligning items with FlexBox to the test.…Now, I can tell you that this challenge is going to be a little bit more involved…than our last one. So, let's take a look at what we're going…to be doing. I've opened up the index.html file from…the 03, 06 directory. And we're also going to be working in the…flexbox.css file, which is found in the _css directory.…Now I want to point out what our objectives are in this particular challenge.…We want to focus on the alignment properties that we've learned so far.…
We want to focus on the ability to align items to the both the main and the cross axis.…So your going to have to really pay attention.…To those two principles within this challenge.…And we're also going to take a look at how margins affect alignment and how we can…use some of the margin properties in order to enhance how we're aligning our elements.…So those are things that you want to focus on as you look at these steps that we're…going to be working with. Now before you actually go in and start…
- 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.