Назовите пять свойств flexbox

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

Различаете ли вы свойства контейнера и свойства элемента и понимаете ли модель двух осей. Вопрос на счёт выдаёт тех, кто верстает подбором: они называют пять слов, но не могут сказать, к чему каждое применяется.

Как отвечать

Сначала главное: display: flex включает режим на контейнере, дальше свойства делятся на две группы, и путать их нельзя.

На контейнере:

• flex-direction задаёт главную ось: row по умолчанию, column, плюс обратные варианты;
• justify-content распределяет элементы вдоль главной оси: flex-start, center, space-between, space-around, space-evenly;
• align-items выравнивает по поперечной оси, по умолчанию stretch, отсюда одинаковая высота колонок без хаков;
• flex-wrap разрешает перенос на новую строку, по умолчанию nowrap;
• gap задаёт расстояние между элементами и заменяет отступы с отрицательными полями.

На элементе: flex-grow, flex-shrink и flex-basis, обычно в сокращении flex, плюс align-self для переопределения выравнивания у одного элемента и order для смены визуального порядка.

.row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.row__main { flex: 1 1 0; min-width: 0; }

Добавьте, что оси относительные: при flex-direction: column главной становится вертикаль, и justify-content начинает управлять уже ей.

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

Считают display: flex одним из свойств флексбокса. Это значение свойства display, которым режим раскладки включается. Мелочь, но по ней интервьюер понимает, есть ли у кандидата модель в голове.

Называют только свойства контейнера. Вопросы про сжатие элементов, про flex: 1 против flex-basis: auto и про элемент, который не хочет ужиматься, идут следом, и без второй группы отвечать на них нечем.

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