Что делает flex-direction и какие значения бывают

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

Понимаете ли вы, что flex-direction задаёт главную ось, а не просто выбирает «строку или столбец». От оси зависит, что делают justify-content, align-items и flex-basis. Следом часто спрашивают, почему после смены направления «сломалось» выравнивание.

Как отвечать

Свойство ставится на flex-контейнер и определяет главную ось, вдоль которой выкладываются элементы. Поперечная ось всегда перпендикулярна ей.

• row: значение по умолчанию. Элементы идут по строке в направлении письма, то есть слева направо, а при direction: rtl справа налево;
• row-reverse: та же строка, но начало и конец главной оси меняются местами;
• column: элементы идут сверху вниз, по блочной оси;
• column-reverse: снизу вверх.

Главное следствие: justify-content всегда работает вдоль главной оси, align-items поперёк. В column первое свойство выравнивает по вертикали, второе по горизонтали, а flex-basis означает уже высоту, а не ширину. В row-reverse значение justify-content: flex-start прижимает элементы к правому краю, потому что там теперь начало оси, а start по-прежнему ориентируется на направление письма.

Направление и перенос удобно задавать сокращением flex-flow: column wrap. Типичный приём адаптивной вёрстки: на мобильных column, с определённой ширины через медиазапрос row.

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

Используют *-reverse, чтобы поменять порядок блоков. Меняется только картинка: DOM остаётся прежним, поэтому Tab и скринридер идут в исходном порядке. Если порядок важен по смыслу, его меняют в разметке.

Забывают про align-items: stretch по умолчанию. В column кнопки и инпуты внезапно растягиваются на всю ширину контейнера.

Ставят flex: 1 дочернему элементу в column и удивляются, что он не растёт. У контейнера нет заданной высоты, расти некуда. А если внутри такого блока нужен скролл, ему часто не хватает min-height: 0.