Пісочниця Flexbox

Осі міняються місцями

justify-content розставляє елементи вздовж головної осі, align-items — упоперек неї. Головна вісь задається властивістю flex-direction.

При row головна вісь горизонтальна: justify-content рухає ліворуч-праворуч, align-items — згори вниз. При column усе міняється місцями: тепер justify-content рухає згори вниз, а align-items — ліворуч-праворуч.

Саме тут плутаються найчастіше: людина ставить column, хоче зсунути елементи вниз, пише align-items — і нічого не відбувається. Перемкніть напрямок в інструменті й подивіться на підказку під ним.

align-content без переносу мертвий

align-content вирівнює рядки між собою, а не елементи. Поки flex-wrap: nowrap, рядок один — вирівнювати нема чого, і властивість не робить нічого.

Вона оживає лише разом із flex-wrap: wrap і коли елементів справді вистачає на два рядки. В інструменті цей селект тому й вимкнений, доки не ввімкнено перенос.

Текст розпирає флекс-елемент

Флекс-елемент типово має min-width: auto, тобто не може стиснутись менше за свій вміст. Довге слово, нерозривний рядок чи широка таблиця всередині — і елемент розпирає контейнер, хоч flex-shrink і дозволяє стискатися.

Лікується min-width: 0 на елементі (для колонки — min-height: 0). Це найчастіший рецепт у флексі після самих осей.