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

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

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

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

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

правити

Нотатка

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

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

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

flex-direction

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

автор: Svitlana

правити

flex-wrap

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

<div class="row">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

.row {
    display: flex;
    flex-flow: row-reverse wrap;
}

.row div {
    width: 110px;
    padding: 8px;
    border: 1px solid #0172ad;
    text-align: center;
}