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


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

Приклади


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

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

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

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

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

div {


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


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


    display: flex;


    flex-flow: row-reverse wrap;


}

Додаткові посилання