Урок 04 · 11 хв

Flex: ряд і колонка

Батько display:flex. Діти вишиковуються. gap замість маргінів-милиць.

display: flex на контейнері. flex-direction: row | column. justify-content — за головною віссю, align-items — за поперечною. gap — відстань між дітьми. Дитина з flex: 1 забирає вільне місце.

Шапка

Можна спитати про це правило«Flex для смужки, а не для всієї сторінки наосліп»

margin-left: auto у дитини прибиває її в кінець ряду.
min-width: 0 у flex-дитини з текстом — інакше не стиснеться й зламає ряд.
align-items: stretch за замовчуванням. Для вертикального центру — center.

Можна спитати про цей пункт«Суть уроку»

Перевірка

Закріпи, поки не пішов далі

1. display:flex ставиш на
2. gap у flex
3. flex: 1 у дитини