Join James Williamson for an in-depth discussion in this video Understanding flex axes, part of CSS Flexbox First Look.
Throughout this course, you'll hear me use the term main axis and cross axis when…referring to how flexbox controls the distribution and layout of elements.…You'll need to understand how these axes work in order to correctly control flexbox properties.…So I want to take a moment to discuss flex axes before we get into discussing the…actual properties themselves. When you create a flex container, the flex…items inside of it are arranged along the main axis and cross axis based on the…properties you set. The easiest way to visualize this is to…think about a flex container as either row or a column.…
If the flex container is set to display as a row, the main axis runs horizontally,…while the cross axis runs vertically. If it's set to be a column, then the main…axis is vertical while the cross axis is horizontal.…This is very important to remember as flexbox has properties that control…alignment based on main and cross axis. If you don't understand which axis is…currently the main axis it's very difficult to know exactly which property…
- 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.