flex-direction задаёт направление, в котором flex-контейнер выстраивает свои элементы: в строку слева направо (row, по умолчанию), в строку справа налево (row-reverse), в столбец сверху вниз (column) или в столбец снизу вверх (column-reverse). Значение column и column-reverse не просто разворачивают ряд в столбец - они меняют местами, какая ось главная, а какая поперечная.
В этом уроке
Попробуй прямо сейчас: замени flex-direction: row на column - те же три блока встанут друг под другом сверху вниз. Попробуй ещё row-reverse и column-reverse - порядок 1, 2, 3 развернётся на экране.
Четыре значения flex-direction: row, row-reverse, column, column-reverse
row (значение по умолчанию, можно вообще не писать) выстраивает элементы в строку слева направо. row-reverse - тоже в строку, но справа налево: первый элемент в HTML окажется крайним справа. column выстраивает элементы в столбец сверху вниз, а column-reverse - в столбец снизу вверх, где первый элемент в HTML окажется внизу. Само направление касается только того, куда элементы выстраиваются визуально - разметка HTML при этом никак не меняется.
.container { display: flex; flex-direction: column; } - элементы встанут в столбец сверху вниз.
.item { flex-direction: column; } на отдельном элементе внутри контейнера - flex-direction относится к контейнеру целиком, у отдельного элемента это свойство не имеет смысла и ничего не изменит.
Как flex-direction меняет местами главную и поперечную ось
В уроке про то, что такое Flexbox, уже говорилось, что у flex-контейнера всегда есть главная ось (main axis) и поперечная (cross axis), и что по умолчанию (при row) главная ось горизонтальна. flex-direction - это как раз то свойство, которое задаёт, какая ось будет главной. При row и row-reverse главная ось остаётся горизонтальной: justify-content выравнивает элементы по горизонтали, а align-items - по вертикали. Но при column и column-reverse главная ось становится ВЕРТИКАЛЬНОЙ - и justify-content с align-items меняются ролями: теперь justify-content выравнивает элементы по вертикали, а align-items - по горизонтали. Это одна из самых частых причин путаницы у новичков: один и тот же код с justify-content: center даёт разный результат в зависимости от того, какое значение стоит у flex-direction.
.container { display: flex; flex-direction: column; justify-content: center; } - при column это центрирует элементы ПО ВЕРТИКАЛИ (вдоль главной оси).
.container { display: flex; justify-content: center; }, ожидая вертикальное центрирование - при значении flex-direction по умолчанию (row) justify-content центрирует по ГОРИЗОНТАЛИ, а не по вертикали.
Почему с row-reverse и column-reverse стоит быть осторожнее
row-reverse и column-reverse меняют только то, что видно на экране - порядок элементов в самом HTML-коде остаётся прежним. Из-за этого возникает расхождение: пользователь клавиатуры, переключающийся по элементам клавишей Tab, будет двигаться в исходном порядке HTML, а не в том, что видно на экране, и то же самое сделает скринридер. Если визуальный порядок важен для смысла (например, "сначала вопрос, потом ответ"), а реверс используется просто для красоты раскладки, для части пользователей получится нелогичная последовательность. Общая рекомендация: если нужен другой порядок, по возможности менять порядок прямо в HTML, а не полагаться только на reverse-значения flex-direction.
flex-direction: row; с элементами, расположенными в HTML именно в том порядке, в каком они должны восприниматься.
flex-direction: row-reverse; как единственный способ поменять порядок для важной по смыслу последовательности - визуально порядок поменяется, а для клавиатуры и скринридера - нет.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Пишут flex-direction на отдельном элементе, а не на контейнере | Свойство не действует, направление не меняется | flex-direction всегда пишется на элементе с display: flex, а не на его детях |
| Ждут, что justify-content всегда центрирует по горизонтали | При flex-direction: column результат неожиданно оказывается вертикальным центрированием | Помнить: justify-content работает вдоль главной оси, а её направление задаёт flex-direction |
| Используют row-reverse/column-reverse только ради визуального эффекта в смыслово важном порядке | Порядок для клавиатуры и скринридера остаётся прежним, получается расхождение | Если порядок важен по смыслу - менять его в HTML, а не только визуально через reverse |
| Путают column (столбец) с обычным блочным потоком без flexbox | Кажется, что display: flex не нужен вовсе для расположения "как обычно" | column и обычный поток похожи визуально, но только column даёт доступ к justify-content, align-items и другим flex-свойствам |
Шпаргалка
| Что нужно | Как сделать |
|---|---|
| В строку слева направо (по умолчанию) | flex-direction: row; |
| В строку справа налево | flex-direction: row-reverse; |
| В столбец сверху вниз | flex-direction: column; |
| В столбец снизу вверх | flex-direction: column-reverse; |
| Где применяется свойство | только на контейнере (display: flex), не на элементах |
| Что меняется при column/column-reverse | justify-content и align-items меняются ролями (главная ось становится вертикальной) |
Коротко: отвечаем на вопросы
Можно ли задать flex-direction только одному элементу внутри контейнера?
Нет, flex-direction - свойство самого контейнера целиком, а не отдельных элементов внутри него. Оно всегда одно на весь набор элементов. Если нужно изменить позицию именно одного элемента, для этого есть другие инструменты - например, свойство order меняет порядок конкретного элемента, а align-self выравнивает его отдельно от остальных по поперечной оси.
Как flex-direction влияет на justify-content и align-items?
flex-direction определяет, какая ось главная. При row и row-reverse главная ось горизонтальна, поэтому justify-content выравнивает по горизонтали, а align-items - по вертикали. При column и column-reverse главная ось становится вертикальной, и эти два свойства меняются ролями: justify-content начинает выравнивать по вертикали, а align-items - по горизонтали.
