CSS flexbox: direction
This course covers how flexbox items flow and how they are sized. It starts with flex-direction and how the main and cross axes swap when items run in a column. It then covers flex-wrap for items that run out of room, and align-content for spacing wrapped lines. Next come flex-grow, flex-shrink and flex-basis, along with the flex shorthand. The order property reorders items visually, with an accessibility trade-off. A final lesson builds a responsive pricing card row with no media query.
What you'll learn
- ✓How flex-direction rotates the main and cross axes
- ✓Wrapping items onto new lines with flex-wrap and flex-flow
- ✓Spacing wrapped lines with align-content
- ✓Growing and shrinking items with flex-grow, flex-shrink and flex-basis
- ✓Reading the flex shorthand values 1, auto, none and initial
- ✓Reordering items with order and its accessibility trade-off
flex-direction: row, column, and the axis swap
The last course built a navbar and a centered modal, but every example kept the main axis in its default direction: horizontal, left to right. That default was only a starting point. flex-direction is the property that turns it.
Read the full lesson free →Curriculum
7 lessonsflex-direction: row, column, and the axis swap
The four flex-direction values, and how justify-content and align-items follow the main and cross axes when they rotate.
flex-wrap: when items run out of room
How nowrap squeezes items before overflowing, how wrap moves them onto new lines, and the flex-flow shorthand.
align-content: spacing between wrapped lines
How align-content spaces wrapped lines along the cross axis, and why it needs flex-wrap to have any effect.
flex-grow: distributing extra space among items
How flex-grow lets items absorb leftover main-axis space, evenly or in a ratio, starting from a default of 0.
flex-shrink and flex-basis
How flex-shrink lets items shrink down to min-content width, how flex-basis sets starting size, and common flex values.
order: reordering items visually
How order rearranges items on screen while screen readers and Tab still follow the HTML source order.
Putting it together: a responsive card row
A responsive pricing card row that combines wrapping, sizing and order, adapting to the window without media queries.