Что означают flex-row, flex-column, main axis и cross axis в flexbox

Что проверяют

Понимаете ли вы, что выравнивание во flexbox привязано не к вертикали и горизонтали, а к осям, которые задаёт направление. Тот, кто это усвоил, перестаёт подбирать свойства перебором и умеет объяснить, почему вёрстка поехала.

Как отвечать

Свойство display: flex создаёт контекст с двумя осями. Главную ось задаёт flex-direction: при значении row она идёт вдоль строки, при column сверху вниз. Поперечная ось всегда перпендикулярна главной. Начало главной оси зависит от направления письма, поэтому при row-reverse или при правостороннем языке элементы пойдут от другого края.

Что к какой оси относится:

• вдоль главной: justify-content у контейнера, flex-grow, flex-shrink и flex-basis у элементов;
• поперёк: align-items у контейнера и align-self у элемента, а align-content имеет смысл только при flex-wrap: wrap, когда строк несколько;
• gap работает по обеим осям.

Стоит заметить вслух, что flex-row и flex-column это не свойства CSS, а классы утилитарных фреймворков. В чистом CSS пишется flex-direction: row или flex-direction: column, и вопрос часто задают именно в такой формулировке.

.bar { display: flex; flex-direction: column; align-items: center; }

Здесь align-items центрирует по горизонтали, потому что главная ось стала вертикальной.

Где спотыкаются

Меняют направление на column и не понимают, почему justify-content: center перестало центрировать по горизонтали. Свойства привязаны к осям, а не к сторонам экрана, так что роли двух свойств меняются местами.

Путают flex: 1 и flex-grow: 1. Короткая запись разворачивается в 1 1 0%, базовый размер обнуляется, и место делится поровну. С одним только flex-grow базовый размер остаётся auto, делится лишь остаток, и колонки выходят разной ширины.

Ловят переполнение и подпирают его шириной родителя. У flex-элемента минимальный размер по главной оси по умолчанию равен auto, поэтому он не сжимается меньше содержимого: длинное слово, таблица или блок кода растягивают строку. Лечится min-width: 0 на самом элементе.