flex-flow: сокращённое свойство

flex-flow — shorthand, объединяющий flex-direction и flex-wrap в одну декларацию на flex-контейнере.

Зачем нужно

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

Где используется

  • Адаптивные карточные сетки
  • Переключение направления и переноса через медиазапросы
  • Краткая запись при кодревью и в UI-библиотеках

Синтаксис

/* flex-flow: <flex-direction> <flex-wrap> */
.container {
  display: flex;
  flex-flow: row nowrap;         /* по умолчанию */
  flex-flow: row wrap;           /* горизонтально с переносом */
  flex-flow: column nowrap;      /* вертикально без переноса */
  flex-flow: column wrap;        /* вертикально с переносом */
  flex-flow: row-reverse wrap;   /* обратный порядок с переносом */
}

Примеры

Карточная сетка

.cards {
  display: flex;
  flex-flow: row wrap; /* = flex-direction: row; flex-wrap: wrap; */
  gap: 16px;
}
.card {
  flex: 1 1 240px;
}

<div class="cards">
  <article class="card">Карточка 1</article>
  <article class="card">Карточка 2</article>
  <article class="card">Карточка 3</article>
</div>

Адаптивное переключение

.layout {
  display: flex;
  flex-flow: column nowrap; /* мобильный */
}

@media (min-width: 768px) {
  .layout {
    flex-flow: row wrap; /* планшет и выше */
  }
}

Только flex-direction без flex-wrap

/* Можно указать одно значение */
.menu {
  display: flex;
  flex-flow: column; /* flex-wrap остаётся nowrap */
}

Эквивалентность

/* Раздельная запись */
.container {
  flex-direction: row;
  flex-wrap: wrap;
}

/* Shorthand — эквивалентно */
.container {
  flex-flow: row wrap;
}

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

  1. flex-flow применён к элементу — это свойство только для flex-контейнера
  2. Порядок значений важен — сначала flex-direction, потом flex-wrap; хотя браузеры обычно распознают оба порядка, стандарт требует именно такой
  3. Одно значение — допустимо указать только flex-direction или только flex-wrap; пропущенное значение получает дефолт

Связанные темы

Ресурсы