Свойства CSS

Меню

flex-flow

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

11.0+ 28.0+ 29.0+ 17.0+ 9.0+

Описание

CSS свойство flex-flow позволяет задать значения свойств flex-direction и flex-wrap в одном месте. То есть свойство flex-flow контролирует сразу и направление расположения flex-элементов и перенос.

Примечание: если элемент не является flex-контейнером (display: flex), свойство flex-flow будет проигнорировано.

Значение по умолчанию: row nowrap
Применяется: к flex-контейнерам
Анимируется: нет
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.flexFlow="column nowrap";

Синтаксис

flex-flow: flex-direction flex-wrap;

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

Значение Описание
flex-direction Возможные значения:
  • row
  • row-reverse
  • column
  • column-reverse
Значение по умолчанию row.
flex-wrap Возможные значения:
  • nowrap
  • wrap
  • wrap-reverse
Значение по умолчанию nowrap.

Пример

CSS Свойство:
flex-flow:
Результат:
1
2
3
4
5
CSS Код:
#main {
width: 200px;
height: 200px;
border: 1px solid black;
display: flex;
flex-flow: row nowrap;
}
Кликните на любое значение свойства, чтобы увидеть результат