css властивість flex-flow

Це скорочена властивість для властивостей:

flex-direction (відповідає за напрямок шикування гнучких елементів)
flex-wrap (забороняє чи дозволяє знесення гнучких елементів)

Властивість `flex-flow`

Задає для контейнера основну та поперечну осі.

Ви можете вказати одне чи два значення - порядок не важливий.

Нотатка:

Властивість flex працює тільки зі гнучкими елементами, тобто з тими елементами, у котрих властивість display встановлена як flex (display: flex; або display: inline-flex).

Синтаксис

flex-flow: flex-direction flex-wrap|initial|inherit;

Властивість flex-flow може отримувати 4 значення:


flex-direction: Напрямок відображення гнучких елементів.

flex-wrap: Спосіб знесення гнучких елементів.

initial: Встановлює цю властивість в значення без задання

inherit: Успадкує значення властивості від свого батьківського елемента

Значення без задання:	row nowrap
Наслідує:	Ні
Анімується:	Ні
JavaScript синтаксис:	object.style.flexFlow="column nowrap"

Переглядач
flex-flow	29.0	11.0	28.0	9.0	12.1	13.0

Переглядач
flex-flow	4.4	28.0	9.2

Мобільних переглядачів ще не додано.

Приклади

Динамічний приклад

See the Pen <a href='https://codepen.io/MichaelBondar/pen/ZxYVOa/'>ZxYVOa</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

Демонстрація дії різних значень властивості

See the Pen <a href='https://codepen.io/MichaelBondar/pen/aypXqW/'>flex-flow-1</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

Простий приклад

See the Pen <a href='https://codepen.io/MichaelBondar/pen/PKWLwM/'>flex-flow-2</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

Приклад роботи властивості

See the Pen <a href='https://codepen.io/MichaelBondar/pen/xWbmVa/'>xWbmVa</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

Найпростіший приклад використання css властивості flex-flow

div {


    display: -webkit-flex; /* Safari */


    -webkit-flex-flow: row-reverse wrap; /* Safari 6.1+ */


    display: flex;


    flex-flow: row-reverse wrap;


}