CSS свойство flex-flow
Свойство CSS flex-flow — это сокращённое свойство для flex-wrap и flex-direction. Узнайте об этом свойстве и попробуйте примеры.
CSS-свойство flex-flow — это сокращённая запись, которая одновременно устанавливает два свойства flex-контейнера: flex-direction (ось, вдоль которой располагаются элементы) и flex-wrap (переносятся ли элементы на следующую строку или остаются на одной). Вместо того чтобы писать оба объявления отдельно, вы объединяете их в одну строку — CSS становится компактнее, а намерение — яснее.
Это свойство относится к свойствам CSS3 и входит в модуль Flexible Box Layout. Оно действует только на элемент, у которого display задан как flex или inline-flex; на не-flex-элемент оно не оказывает никакого эффекта, а если у flex-контейнера нет гибких дочерних элементов, ему нечего размещать.
На этой странице рассмотрен синтаксис flex-flow, что делает каждое значение, а также приведены запускаемые примеры для всех распространённых комбинаций направления и переноса.
Что контролирует каждое значение
flex-flow принимает одно значение flex-direction и одно значение flex-wrap в любом порядке:
flex-direction— главная ось и порядок, в котором элементы следуют вдоль неё:row(по умолчанию) — слева направо.row-reverse— справа налево.column— сверху вниз.column-reverse— снизу вверх.
flex-wrap— что происходит, когда элементы не помещаются на одной строке:nowrap(по умолчанию) — все элементы сжимаются до одной строки и могут уменьшаться в размере.wrap— элементы переносятся на новые строки в том же направлении.wrap-reverse— элементы переносятся на новые строки в противоположном направлении поперечной оси.
Поскольку начальное значение равно row nowrap, flex-контейнер без заданного flex-flow располагает элементы в одну горизонтальную строку.
Современные браузеры поддерживают свойство flex-flow нативно, без вендорных префиксов.
| Начальное значение | row nowrap |
|---|---|
| Применяется к | Flex-контейнерам |
| Наследуется | Нет. |
| Анимируется | Нет. |
| Версия | CSS3 |
| DOM-синтаксис | object.style.flexFlow = "column nowrap"; |
Синтаксис
Синтаксис CSS-свойства flex-flow
flex-flow: <flex-direction> || <flex-wrap>;
/* or */ initial | inherit;Когда мы задаём flex-flow: row wrap;, первое значение определяет flex-direction, а второе — свойство flex-wrap. Два значения независимы от порядка, так как принимают разные ключевые слова, поэтому flex-flow: wrap row; также является допустимой записью. Можно указать только одно из них — например, flex-flow: column; оставляет flex-wrap в значении по умолчанию nowrap.
Пример CSS-свойства flex-flow
flex-flow: row wrap;Следующий код аналогичен приведённому выше.
Пример свойств flex-direction и flex-wrap
flex-direction: row;
flex-wrap: wrap;Пример свойства flex-flow со значениями "row" и "wrap":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row wrap;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-flow property example</h2>
<div class="example">
<div style="background-color: #8ebf42;">A</div>
<div style="background-color: #1c87c9;">B</div>
<div style="background-color: #cccccc;">C</div>
<div style="background-color: #666666;">D</div>
<div style="background-color: #4c4a4a;">E</div>
<div style="background-color: #c6c4c4;">F</div>
</div>
</body>
</html>Пример свойства flex-flow со значениями "wrap-reverse" и "column":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: column wrap-reverse;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-flow property example</h2>
<div class="example">
<div style="background-color: #8ebf42;">A</div>
<div style="background-color: #1c87c9;">B</div>
<div style="background-color: #cccccc;">C</div>
<div style="background-color: #666666;">D</div>
<div style="background-color: #4c4a4a;">E</div>
<div style="background-color: #c6c4c4;">F</div>
</div>
</body>
</html>Пример свойства flex-flow со значениями "row" и "nowrap":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row nowrap;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-flow property example</h2>
<div class="example">
<div style="background-color: #8ebf42;">A</div>
<div style="background-color: #1c87c9;">B</div>
<div style="background-color: #cccccc;">C</div>
<div style="background-color: #666666;">D</div>
<div style="background-color: #4c4a4a;">E</div>
<div style="background-color: #c6c4c4;">F</div>
</div>
</body>
</html>Результат
При flex-flow: row nowrap все шесть элементов остаются на одной горизонтальной строке и сжимаются, чтобы поместиться в контейнер, вместо того чтобы переноситься:
Пример свойства flex-flow со значениями "row-reverse" и "nowrap":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row-reverse nowrap;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-flow property example</h2>
<div class="example">
<div style="background-color: #8ebf42;">A</div>
<div style="background-color: #1c87c9;">B</div>
<div style="background-color: #cccccc;">C</div>
<div style="background-color: #666666;">D</div>
<div style="background-color: #4c4a4a;">E</div>
<div style="background-color: #c6c4c4;">F</div>
</div>
</body>
</html>Пример свойства flex-flow со значениями "column" и "nowrap":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: column nowrap;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-flow property example</h2>
<div class="example">
<div style="background-color: #8ebf42;">A</div>
<div style="background-color: #1c87c9;">B</div>
<div style="background-color: #cccccc;">C</div>
<div style="background-color: #666666;">D</div>
<div style="background-color: #4c4a4a;">E</div>
<div style="background-color: #c6c4c4;">F</div>
</div>
</body>
</html>Пример свойства flex-flow со значениями "column-reverse" и "nowrap":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: column-reverse nowrap;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-flow property example</h2>
<div class="example">
<div style="background-color: #8ebf42;">A</div>
<div style="background-color: #1c87c9;">B</div>
<div style="background-color: #cccccc;">C</div>
<div style="background-color: #666666;">D</div>
<div style="background-color: #4c4a4a;">E</div>
<div style="background-color: #c6c4c4;">F</div>
</div>
</body>
</html>Значения
| Значение | Описание | Попробовать |
|---|---|---|
| flex-direction | Определяет направление гибких элементов. Возможные значения: row row-reverse column column-reverse initial inherit | Попробовать » |
| flex-wrap | Определяет, должны ли гибкие элементы переноситься или нет. Возможные значения: nowrap wrap wrap-reverse initial inherit | Попробовать » |
| initial | Устанавливает для свойства его значение по умолчанию. | Попробовать » |
| inherit | Наследует свойство от родительского элемента. |
Когда использовать flex-flow
Используйте flex-flow, когда нужно задать одновременно и направление, и поведение переноса flex-контейнера. Типичный паттерн — адаптивная панель элементов, которая должна располагаться в строку на широких экранах, но переноситься на несколько строк на узких: flex-flow: row wrap; решает это одним объявлением. Если вы меняете только одно из двух подсвойств, использование длинной записи flex-direction или flex-wrap напрямую может сделать намерение более очевидным. Чтобы получить полное представление о том, как всё это работает вместе, смотрите полное руководство по Flexbox.