CSS-свойство `flex-flow`

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

Попробуйте

flex-flow: row wrap;

flex-flow: row-reverse nowrap;

flex-flow: row wrap balance;

flex-flow: column wrap-reverse;

flex-flow: column wrap;

flex-flow: column balance wrap;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div>Item One</div>
    <div>Item Two</div>
    <div>Item Three</div>
    <div>Item Four</div>
    <div>Item Five</div>
    <div>Item Six</div>
    <div>Item Seven</div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  width: 80%;
  max-height: 300px;
  display: flex;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  width: 60px;
  margin: 5px 10px;
}

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

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

• flex-direction
• flex-wrap

Синтаксис

/* 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: wrap balance;
flex-flow: balance wrap-reverse;

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

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

Значения

Это свойство задаётся списком ключевых слов, разделённых пробелами, следующих типов:

flex-direction

Ключевое слово, задающее главную ось и направление размещения flex-элементов во flex-контейнере.

flex-wrap

Одно или два ключевых слова, задающих, могут ли flex-элементы переноситься на несколько строк и, если перенос разрешён, направление расположения строк и их балансировку.

Описание

Сокращённое свойство flex-flow задаёт свойства flex-direction и flex-wrap, определяя направление flex-контейнера и поведение переноса его элементов. Оно также может задавать балансировку flex-элементов при разрешённом переносе.

Например, column-reverse wrap задаёт главную ось в направлении блока с обратными началом и концом главной оси. При этом flex-элементы могут переноситься, создавая при необходимости новые строки.

.container {
  flex-flow: column-reverse wrap;
}

Чтобы равномерно распределить flex-элементы по каждой flex-строке, можно добавить ключевое слово flex-wrap balance к wrap:

.container {
  flex-flow: column-reverse wrap balance;
}

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

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

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

Примеры

Основное использование

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

HTML

Добавим список слов в алфавитном порядке:

<ul>
  <li>Alphabet</li>
  <li>Banana</li>
  <li>Crayons</li>
  <li>Dinosaurs</li>
  <li>Eggplant</li>
  <li>Foundation</li>
  <li>Ghosts</li>
  <li>Happy</li>
  <li>Igloo</li>
  <li>Janitors</li>
  <li>Kittens</li>
  <li>Lasso</li>
  <li>Magic 8-ball</li>
  <li>Nincompoop</li>
  <li>Orange</li>
  <li>Petunia</li>
  <li>Quality</li>
  <li>Rancid</li>
  <li>Shoelace</li>
  <li>Terydactyl</li>
  <li>Umbrella</li>
  <li>Valentine</li>
  <li>Westward</li>
  <li>Xylophone</li>
</ul>

CSS

Зададим элементу <ul> отображение flex-контейнера с помощью свойства display, определим width, добавим gap, чтобы оставить пространство между flex-элементами и flex-строками, а затем зададим свойству flex-flow перенос элементов в обратном порядке. Для краткости дополнительный CSS скрыт.

ul {
  display: flex;
  width: 31em;
  gap: 1em;

  flex-flow: row-reverse wrap-reverse;
}

ul {
  list-style: none;
  border: 1px solid;
  font-family: sans-serif;
}
li {
  font-size: 1.25rem;
  padding: 5px;
  border: 1px solid;
  background-color: lightpink;
}
li:nth-of-type(even) {
  background-color: lightgreen;
}

Результат

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

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

См. также

• Основные понятия flexbox
• Упорядочение flex-элементов