Lesson 7 of 12
Structured learning draftLay out one dimension with Flexbox
Flexbox distributes items along one primary axis. It is well suited to navigation, toolbars, card actions and other one-dimensional groups. This lesson pairs implementation with repeatable browser evidence so the learner can explain both the result and its limits.
Learning objectives
- Choose Flexbox for row or column distribution.
- Control growth, shrinking and alignment.
- Preserve usable source order and wrapping.
Lay out one dimension with Flexbox
Lay out one dimension with Flexbox: main axis to cross axis to wrapping.
Choose Flexbox for row or column distribution.
Control growth, shrinking and alignment.
Preserve usable source order and wrapping.
.site-header {
display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.site-header nav {
display: flex; gap: .75rem; flex-wrap: wrap; margin-inline-start: auto;
}
.site-header a { min-block-size: 44px; display: inline-flex; align-items: center; }The main axis follows flex-direction; justify-content works on that axis and align-items works across it. Items shrink by default, which can surprise you when intrinsic content is wide. Wrapping is often safer than forcing text into unusably narrow boxes.
| Evidence | Record |
|---|---|
| Source | The exact HTML and CSS tested |
| Environment | Browser, viewport and input method |
| Result | Observed behavior and test outcome |
| Limitation | Unresolved issue and next action |
Common mistakes
- Using order to create a reading order different from the DOM.
- Confusing justify-content with align-items.
- Forcing nowrap on variable text.
Practice activity
Apply the lesson
Create a header that wraps cleanly with long translated link labels and remains keyboard-navigable at 320 CSS pixels. Submit the source files, test environment, observed result, one failure or boundary case, and a short limitation with the next corrective action.
Check your understanding
In the default flex-direction, which property distributes free horizontal space?
Lesson summary
- Flexbox solves one-dimensional distribution.
- Axes depend on flex-direction.
- Visual reordering must not contradict DOM order.
Sources and further reading
- Learn web developmentMDN Web Docs - accessed 2026-09-04
- HTML StandardWHATWG - accessed 2026-09-04
- Page Structure TutorialW3C Web Accessibility Initiative - accessed 2026-09-04
- Web Content Accessibility Guidelines 2.2W3C - accessed 2026-09-04
Personal study note