Join James Williamson for an in-depth discussion in this video Flex item margins, part of CSS Flexbox First Look.
Although aligning flex items is pretty straightforward, one of the things that…you're going to need to pay close attention to are the margins of your flex items.…Unlike block level elements, flex item margins do not collapse and margins are…used when calculating the final element size.…So let's take a closer look at how margins affect flex items.…So I'm working with margins dot htm file found in the zero three, zero four…directory and I just want to point out a little something about the structure here…before we get started. You'll notice here that we have four boxes…again, the two of them have extra classes. We have flex one and we have right.…
Currently, if we look at kind of where we're starting out, justify content has…been set to flex start. We haven't defined a flow so we know this…is going to be a row and height is 400 pixels, and if we take a look at this in a…browser, I'm sure we're seeing what you sort of expected to see.…Our flex container is pretty tall. It's about 400 pixels tall or so.…
- 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.