Join James Williamson for an in-depth discussion in this video Controlling element flow, part of CSS: Flexbox First Look.
After creating a flex container, you then need to establish the flex flow direction…in order to establish the direction of the main axis.…Now that sounds really complex, but in simple terms you're just defining the flex…container as either a row or a column. So here I have the flow.htm opened up from 01_05.…And again this is pretty much the same file that we were working on last time.…You can see it has section down here with a class of flex container and then we have…four divs in here with a class of box applied to them.…
So in order to set the flow direction of a container I'm going to go down to the next…line here inside my selector. And I'll tell you what, I'm just going to…paste some code in here for you because this is a lot easier than watching me type.…What we're doing is we're controlling the flex direction property.…Flex direction. So again, notice that we have webkit flex direction.…Ms-flex-direction, so all that's added there are the vendor prefixes.…And then the flex direction property 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.