Не всё в интерфейсе располагается слева направо. Меню бывает вертикальным, карточки — колонкой на телефоне и рядом на десктопе, а длинный ряд элементов должен уметь переноситься на новую строку, чтобы не вылезать за края экрана. Свойства flex-direction и flex-wrap дают полный контроль над направлением ряда и его переносом — без них гибкая раскладка была бы наполовину слепой.

После этого урока вы сможете выстраивать флекс-элементы в любую сторону — в ряд или в колонку — и разрешать им переноситься на несколько строк.

Что уже умеем / что добавим

Вы умеете включать флекс и понимаете, что раскладкой управляет контейнер. Теперь научимся задавать направление главной оси и разрешать перенос. В сквозном проекте мы соберём ряд карточек услуг, который будет аккуратно переноситься на новую строку.

Что вы узнаете в рамках статьи

• Как менять направление раскладки свойством flex-direction.
• Чем отличаются значения row и column.
• Что делают обратные направления row-reverse и column-reverse.
• Как разрешить перенос элементов свойством flex-wrap.
• Как направление влияет на положение главной оси.

Ключевые термины

• flex-direction — свойство направления главной оси.
• row — раскладка в ряд (по горизонтали), значение по умолчанию.
• column — раскладка в колонку (по вертикали).
• flex-wrap — свойство переноса элементов на новые строки.
• nowrap — запрет переноса (по умолчанию); wrap — разрешение переноса.

Направление: flex-direction

Свойство flex-direction задаёт, вдоль какой оси выстраиваются элементы. Значение по умолчанию — row (ряд слева направо). Чтобы поставить элементы в колонку, используют column:

.menu {
  display: flex;
  flex-direction: column;
}

Элементы, которые раньше стояли в ряд, теперь выстроятся друг под другом сверху вниз. Важный момент: flex-direction меняет саму главную ось. При column главная ось становится вертикальной — а значит, все выравнивания, которые мы разберём дальше, тоже развернутся вслед за ней. Это частый источник путаницы, поэтому держите направление в голове.

Ряд или колонка

Сравним два основных значения на одном примере:

.row-layout {
  display: flex;
  flex-direction: row;    /* в ряд, слева направо */
}

.column-layout {
  display: flex;
  flex-direction: column; /* в колонку, сверху вниз */
}

Контейнер .row-layout расставит детей горизонтально, .column-layout — вертикально. На практике row используют для меню, панелей и рядов кнопок, а column — когда нужно выстроить блоки в вертикальный стек, но с возможностями флекса (например, чтобы удобно управлять выравниванием и промежутками).

Обратные направления

У каждого направления есть «обратная» версия, которая разворачивает порядок элементов: row-reverse (справа налево) и column-reverse (снизу вверх):

.menu {
  display: flex;
  flex-direction: row-reverse;
}

Элементы визуально поменяются местами: первый по коду окажется справа, последний — слева. Обратите внимание — меняется только визуальный порядок, а не сам HTML. Это удобно в отдельных случаях, но злоупотреблять не стоит: если по коду порядок один, а на экране другой, это может запутать тех, кто пользуется страницей с клавиатуры или экранным диктором.

Перенос: flex-wrap

По умолчанию флекс-элементы стараются уместиться в одну линию и, если места мало, сжимаются, но не переносятся. Такое поведение задаёт значение nowrap. Чтобы разрешить перенос на новые строки, используют flex-wrap: wrap:

.cards {
  display: flex;
  flex-wrap: wrap;
}

Теперь, когда элементам не хватает ширины, лишние аккуратно переходят на следующую строку, а не сжимаются в тонкую полоску и не вылезают за край. Это основа отзывчивых сеток карточек: на широком экране они умещаются в один ряд, на узком — переносятся. Практически всегда, когда вы делаете ряд карточек, flex-wrap: wrap нужен.

Применяем в проекте

Соберём секцию услуг компании как ряд карточек, который умеет переноситься. Возьмём блок с несколькими карточками и включим флекс с переносом.

<section class="services">
  <div class="card">Веб-разработка</div>
  <div class="card">Дизайн</div>
  <div class="card">Поддержка</div>
  <div class="card">Консалтинг</div>
</section>

.services {
  display: flex;
  flex-wrap: wrap;
}

Обновите страницу и попробуйте менять ширину окна: карточки выстроены в ряд, а когда места не хватает, часть из них переносится на новую строку, сохраняя порядок. Мы заложили основу отзывчивой секции услуг — расстояния между карточками и их размеры настроим в следующих уроках.

Частые ошибки

• Забыли, что column разворачивает оси.
  При вертикальном направлении главная ось становится вертикальной, и выравнивания меняются местами.
• Нет flex-wrap: wrap для карточек.
  Без него элементы сжимаются в одну строку вместо переноса.
• Путаница row-reverse и реального порядка.
  Обратное направление меняет только вид, а не HTML — не полагайтесь на него для смысла.
• flex-direction на элементе, а не контейнере.
  Свойство, как и весь флекс, задаётся контейнеру.

Итоги

Замечательно — теперь вы управляете направлением раскладки! Вы умеете выстраивать элементы в ряд и в колонку, разворачивать их обратными направлениями и, что особенно важно, разрешать перенос на новые строки через flex-wrap. Это уже позволяет строить отзывчивые сетки, которые не ломаются на узких экранах. Ваш проект обзавёлся секцией услуг с переносимыми карточками.

Вы отлично продвигаетесь! В следующем уроке возьмёмся за самое востребованное во Flexbox — выравнивание элементов по осям с помощью justify-content и align-items.