Join James Williamson for an in-depth discussion in this video Main axis alignment, part of CSS Flexbox First Look.
In this chapter we're going to be focusing on using flex box to align elements and…we're going to start with aligning elements along the main axis using the…justify content property. Remember, each flex container has two axis.…A main axis and a cross axis. If the container is a column, the main…axis is going to be vertical. if it's a row, it's going to be horizontal.…This is one of the reasons that alignment in Flexbox is so tricky.…You have to remember the direction of the main axis to know which property to use.…
So, I'm going to be working with main.HTM, which is found in the 03_01 directory.…It's very similar to what we've had before.…If I preview this in the browser, for example, you can see that we have our Flex…Container down here that has 4 elements inside of it.…And here is our flex container selector. When you're doing main access alignment…inside of a container, you use the justify content property and you apply that…property to the container itself. So you're not actually doing this on the…
- 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.