CSS flexbox: alignment
This course introduces flexbox alignment with the main axis kept in its default left-to-right row. It starts with display: flex, the roles of flex container and flex items, and the main and cross axes. It then covers justify-content for the main axis and align-items for the cross axis, including the stretch default. Later lessons show centering in both directions, overriding one item with align-self, and spacing with gap. The last lesson builds a navbar and a centered overlay from small nested flex containers.
What you'll learn
- ✓How display: flex turns direct children into flex items along a main and cross axis
- ✓How justify-content distributes leftover space with flex-start, center and the space-* values
- ✓How align-items positions items on the cross axis and why stretch is the default
- ✓Centering content both ways with justify-content and align-items
- ✓Overriding one item's alignment with align-self
- ✓Spacing items with gap, row-gap and column-gap instead of margins
From flow to flexbox: display: flex
The last course covered normal flow: block boxes stacking and inline boxes flowing with text. It's good at both jobs. But three very common layout requests have no clean answer in normal flow. "Put these three items in a row, evenly spaced." "Center this box horizontally and vertically." "Make…
Read the full lesson free →Curriculum
7 lessonsFrom flow to flexbox: display: flex
Turns on display: flex and defines flex container, flex items, the main axis and the cross axis.
justify-content: positioning along the main axis
Shows how justify-content places items on the main axis using six values, from flex-start to space-evenly.
align-items: positioning along the cross axis
Explains align-items on the cross axis, its stretch default, and the flex-start, flex-end, center and baseline values.
Centering with flexbox
Centers items horizontally and vertically with two declarations and compares it with older, fragile centering techniques.
align-self: overriding one item's cross-axis alignment
Uses align-self on a single flex item to override the container's align-items without affecting its siblings.
gap: spacing between items without margin hacks
Replaces margin and :last-child workarounds with gap, which adds space only between adjacent flex items.
Putting it together: a navbar and a centered card
Builds a navbar and a centered modal overlay by combining small nested flex containers.