Модуль 4 · Урок 14
Flex sizing, wrapping і source order
Flex sizing починається з basis, а потім розподіляє positive або negative free space. Якщо item не стискається, перевірте intrinsic minimum; якщо рядки не вирівнюються між собою — пам’ятайте, що кожна flex line незалежна.
flex-basisGrow/shrinkWrapDOM order
Free-space model
1 · Base size
flex-basis або content/declared main size.2 · Outer totalsBasis, gaps, padding/border/margins.
3 · Free spaceContainer main size мінус totals.
4 · DistributionPositive за grow factors; negative — scaled shrink factors.
Keyword flex:auto = 1 1 auto, flex:none = 0 0 auto. Не пояснюйте flex:1 просто як «рівні width»: basis, minimums і content теж беруть участь.
Intrinsic minimum і wrapping
| Symptom | Evidence | Рішення |
|---|---|---|
| Text item розпирає row | Item зупинився на min-content | min-inline-size:0 на потрібному item + wrapping |
| Items переходять на новий рядок | flex-wrap:wrap | Кожна line ділить space незалежно |
| Потрібні вирівняні columns між rows | Widths підганяються вручну | Обрати Grid |
Порядок є частиною змісту
Visual order ≠ DOM/tab order
order, row-reverse і column-reverse змінюють presentation, але не виправляють reading/focus sequence. Якщо послідовність важлива, виправте source.
- Заповніть free-space calculations.
- Зніміть wrap observations на трьох container widths.
- Пройдіть усі links клавішею Tab і звірте з visual order.
Офіційні джерела
Практична перевірка · урок 14 з 60
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.