flex-flow

Базовая линия Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с сентября 2015 года.

Свойство flex-flow CSS сокращённого свойства определяет направление гибкого контейнера, а также его поведение при обёртывании.

Попробуйте

Составные свойства

Это свойство является сокращением следующих свойств CSS:

Синтаксис

/* flex-flow: <'flex-direction'> */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;

/* flex-flow: <'flex-wrap'> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;

/* flex-flow: <'flex-direction'> and <'flex-wrap'> */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;

/* Global values */
flex-flow: inherit;
flex-flow: initial;
flex-flow: revert;
flex-flow: revert-layer;
flex-flow: unset;

Значения

Подробную информацию о значениях см. в flex-direction и flex-wrap.

Формальное определение

Начальное значение	как каждое из свойств сокращения: `flex-direction`: `row` `flex-wrap`: `nowrap`
Применимо к	гибким контейнерам
Наследуется	нет
Вычисленное значение	как каждое из свойств сокращения: `flex-direction`: как указано `flex-wrap`: как указано
Тип анимации	как каждое из свойств сокращения: `flex-direction`: дискретная `flex-wrap`: дискретная

Формальный синтаксис

flex-flow = 
  <'flex-direction'>  ||
  <'flex-wrap'>       

<flex-direction> = 
  row             |
  row-reverse     |
  column          |
  column-reverse  

<flex-wrap> = 
  nowrap        |
  wrap          |
  wrap-reverse

Примеры

Установка column-reverse и wrap

В этом примере главная ось — направление блока с обращённым началом и концом. Элементы flex могут быть обёрнуты, создавая новые строки при необходимости.

element {
  flex-flow: column-reverse wrap;
}

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

Спецификация
CSS Flexible Box Layout Module Level 1 # flex-flow-property

Совместимость браузеров

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`flex-flow`	2921	12	2849	12.115	97	2925	2849	12.114	97	2.01.5	4.44.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow