Join James Williamson for an in-depth discussion in this video Cross-axis alignment, part of CSS: Flexbox First Look.
In the last exercise, we tackled main axis alignment.…In this exercise we're going to explore the align items property and how it allows…us to align flex items along a container's cross axis.…So I'm going to be working in the cross.htm file which is found in 03_02.…Now, structurally, this page is about the same.…We've got four flex item. Four of these boxes if you will, inside…the flex container. And the first thing I want to do is just…kind of show you guys the default behavior for align items.…You can see for example that right now I don't have flex flow defined, and that…means that our flex container is behaving as a row.…
Well, if I go in and give it, let's say, a height of around 300 pixels.…All right, lemme save that. Go out to the browser and now if I check…our flex container and the flex items inside of it, a very curious thing has…happened here. Our flex container is much taller, it's…300 pixels tall now, but the items inside of it are now stretching to fit that height.…So I didn't declare each of them the same height but they're now stretching so 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.