Join James Williamson for an in-depth discussion in this video Content wrapping, part of CSS: Flexbox First Look.
By default all flexbox containers are single lined containers, and they will…size, align and space your flex items along that one single line.…If you want to have your flex items wrapped to a new line rather than overflow…you're going to need to use the flex wrap property.…So, I'm in the wrap.htm file from the 01_06 directory.…And, again we're kind of just picking up where we left off I'm going to modify our…flex container here really quickly. I'm just going to go ahead and give it a…width of 600 pixels. save that.…
Go to my browser. And you can see just a couple things have…changed here. Number one, we have some extra elements.…So where before we only had four boxes, now we have seven.…And you can sort of see, that there's actually a little bit of an overflow…because that's the 600 pixel width right there.…So, elements six and seven are kind of overflowing, if you will, the boundaries…of their parent container. and that's because flex items, by default,…are just single line items. So going back into our code, let's change that.…
- 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.