flex-direction

Вам флекс-элементы в ряд или в колонку?

Время чтения: меньше 5 мин

Кратко

Скопировано

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

Если совсем просто, то это свойство расставляет флекс-элементы в ряд или в колонку.

Пример

Скопировано

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

        
          
          .container {  display: flex;  flex-direction: row;}
          .container {
  display: flex;
  flex-direction: row;
}

        
        
          
        
      

Как понять

Скопировано

Одной из задач при создании флексбоксов была реализация простого механизма с расстановкой блоков в ряд или в колонку. Для этого были введены понятия осей — основной и поперечной.

И, конечно, понадобилось свойство для управления ими. Так и появилось свойство flex-direction, способное управлять обеими осями сразу.

Как пишется

Скопировано

Возможные значения

Скопировано
  • row (значение по умолчанию) — основная ось идёт горизонтально слева направо, поперечная ось идёт вертикально сверху вниз.
  • row-reverse — основная ось идёт горизонтально справа налево, поперечная ось идёт вертикально сверху вниз.
  • column — основная ось идёт вертикально сверху вниз, поперечная ось идёт горизонтально слева направо.
  • column-reverse — основная ось идёт вертикально снизу вверх, поперечная ось идёт горизонтально слева направо.
Пример свойства flex-direction

Подсказки

Скопировано

💡 Как только зададите display: flex для родителя, его дети выстроятся в ряд. Не пишите дополнительно свойство flex-direction, если не требуется менять это поведение.

Поддержка в браузерах:
  • Chrome 57, поддерживается
  • Edge 79, поддерживается
  • Firefox 81, поддерживается
  • Safari 9, поддерживается
О Baseline

На практике

Скопировано

Алёна Батицкая советует

Скопировано

🛠 Помните, что блочные элементы по умолчанию выстраиваются друг под другом, каждый в новом ряду. Если вы написали display: flex, а потом flex-direction: column, и при этом никаких других возможностей флексбоксов не используете, то убедитесь, точно ли вам тут нужен флекс-контейнер?