Модуль 4 · Урок 13
Flex axes, alignment і gap
Flexbox розкладає direct children уздовж однієї main axis. Спершу визначте container, items, direction і free space; лише тоді обирайте justify/align — без вгадування за назвами left/right.
Container/itemsMain/cross axisAlignmentGap
Formatting context і дві осі
.actions { display:flex; flex-direction:row; align-items:center; gap:.75rem; }display:flex робить in-flow direct children flex items. Main axis задає flex-direction; cross axis перпендикулярна. row працює вздовж inline axis writing mode, тому start/end надійніші за припущення «ліворуч/праворуч».
Хто вирівнює що
| Property | Axis/target | Умова |
|---|---|---|
justify-content | Items як група на main axis | Потрібен distributable free space |
align-items | Усі items на cross axis | Container має cross size/line |
align-self | Один item на cross axis | Override container alignment |
align-content | Flex lines на cross axis | Wrapping + кілька lines + extra space |
gap | Між items/lines | Не додає outer edge space |
Практика
- Позначте три containers у
flex-axis-map.csv. - Зберіть header/action row і nav через nested flex containers.
- Перевірте
justify-contentтільки після вимірювання free space. - Не змінюйте DOM order і не використовуйте absolute positioning.
Офіційні джерела
Практична перевірка · урок 13 з 60
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.