CSS свойство flex-flow

Определение и применение

Свойство flex-flow объединяет направление главной оси и перенос линий Flexbox-контейнера.

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

Пропущенная составляющая сбрасывается в начальное значение. Например, flex-flow: column одновременно устанавливает flex-wrap: nowrap.

Связанные свойства: flex-direction, flex-wrap.

Подробнее об осях и размерах — в учебнике: Flexbox: контейнер и Flexbox: элементы.

В генераторе Flexbox можно настроить контейнер и размеры его элементов и получить готовый CSS.

Попробуйте значения flex-flow

Короткая запись задаёт направление и перенос. Фиксированная высота позволяет увидеть перенос колонок.

Значение свойства

flex-flow: row nowrap

HTML и CSS примера
HTML
<div class="stage demo-target">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.demo-target {
  display: flex;
  gap: 8px;
  flex-flow: row nowrap;
}
.item {
  width: 70px;
  min-height: 40px;
  flex-shrink: 0;
}

Сравнение направлений flex-direction

Выберите direction (направление письма). Во всех схемах задано writing-mode: horizontal-tb (горизонтальное письмо, строки идут сверху вниз), порядок HTML — 1, 2, 3.
Направление письма — direction
row
123
row-reverse
123
column
123
column-reverse
123

При смене direction с ltr на rtl направления row и row-reverse меняются местами. В колонках вертикальный порядок сохраняется, но при align-items: flex-start элементы переходят к правому краю.

Сравнение переноса flex-wrap

Выберите direction (направление письма). Во всех схемах задано flex-direction: row и writing-mode: horizontal-tb (горизонтальное письмо, строки идут сверху вниз), порядок HTML — 1, 2, 3, 4, 5.
Направление письма — direction
nowrap
12345
wrap
12345
wrap-reverse
12345

При nowrap элементы сжимаются до одной линии. При переносе ширины достаточно для трёх элементов на линии. При смене direction меняется горизонтальное направление элементов внутри каждой линии. Значение wrap-reverse меняет порядок самих линий по поперечной оси.

Поддержка браузерами

Спецификация: CSS flexbox

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (1) поддерживаются не везде — смотрите таблицу.

Показать браузеры
Совместимостьcss.properties.flex-flow
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
flex-flow✓29✓12✓28✓12.1✓9✓29✓28✓12.1✓9✓2.0✓4.4✓9
balance✓150✓150×✓134×✓150×✓101××✓150×
column✓21✓12✓28✓15✓7✓25✓28✓14✓7✓1.5✓4.4✓7
column-reverse✓21✓12✓28✓15✓7✓25✓28✓14✓7✓1.5✓4.4✓7
nowrap✓21✓12✓28✓15✓7✓25✓28✓14✓7✓1.5✓4.4✓7
row✓21✓12✓28✓15✓7✓25✓28✓14✓7✓1.5✓4.4✓7
row-reverse✓21✓12✓28✓15✓7✓25✓28✓14✓7✓1.5✓4.4✓7
wrap✓21✓12✓28✓15✓7✓25✓28✓14✓7✓1.5✓4.4✓7
wrap-reverse✓21✓12✓28✓15✓7✓25✓28✓14✓7✓1.5✓4.4✓7

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Синтаксис

CSS
flex-flow: <'flex-direction'> || <'flex-wrap'>;

/* Глобальные значения */
flex-flow: initial | inherit | unset | revert | revert-layer;

| разделяет варианты. || разрешает одну или обе составляющие в любом порядке. Типы в угловых скобках обозначают допустимые значения из таблицы или соответствующих составляющих.

JavaScript:

JavaScript
element.style.flexFlow = "column wrap";

Начальное значение свойства

  • flex-direction — row;
  • flex-wrap — nowrap.

Значения свойства

Значения flex-flow
Значение Описание
<flex-direction> row, row-reverse, column или column-reverse. Направление зависит от режима письма.
<flex-wrap> nowrap, wrap или wrap-reverse. Можно указать одну или обе составляющие в любом порядке.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства flex-flow устанавливает его начальное значение.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Спецификация

CSS Flexible Box Layout — спецификация flex-flow.

Наследуется

Нет.

Анимируемое

Дискретно: значение переключается, а не создаёт плавное перемещение элементов.

Примеры, попробуйте сами

Расположение flex-элементов

Замените row wrap на column nowrap. Краткая запись управляет направлением и переносом.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}
.container {
    background: #eef2f5;
    border: 1px dashed #8495a5;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Расположение flex-элементов</title>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item target">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>
style.css
CSS
.container {
    display: flex;
    width: 220px;
    max-width: 100%;
    flex-flow: row wrap;
}
.item {
    flex: 0 0 80px;
}