flex-flow — это комбинированный свойство CSS, которое используется для установки значения одновременно свойства flex-direction и flex-wrap. Оно управляет направлением и упаковкой элементов внутри гибкого контейнера (flex-контейнера).
Синтаксис свойства flex-flow следующий:
flex-flow: <flex-direction> <flex-wrap>;
где:
<flex-direction>
— это свойство, которое устанавливает направление гибкого контейнера, может принимать значения: row (от левого к правому краю, по умолчанию), row-reverse (от правого к левому краю), column (сверху вниз), column-reverse (снизу вверх).<flex-wrap>
— это свойство, которое устанавливает, переносится ли содержимое на новую строку в случае, если оно не может поместиться в текущей строке. Может принимать значения: nowrap (не переносится, по умолчанию), wrap (переносится), wrap-reverse (переносится, но в обратном порядке).
Пример использования:
.container {
display: flex;
flex-flow: row wrap;
}
В этом примере свойство flex-flow устанавливает одновременно направление контейнера (от левого к правому краю) и перенос его содержимого на новую строку, если это необходимо. значения row wrap означает, что элементы будут располагаться в строка-колонку и будут переноситься на новую строку, если они не помещаются в текущую строку.