Свойство CSS flex-wrap
Свойство CSS flex-wrap определяет, должны ли элементы переноситься на новую строку. Примеры с разными значениями.
Свойство flex-wrap управляет тем, размещаются ли элементы flex-контейнера на одной строке или могут переноситься на несколько строк. По умолчанию flex-контейнер пытается вместить все элементы в одну строку, даже если это требует их сжатия или выхода за пределы контейнера. Установка flex-wrap: wrap разрешает элементам переходить на новые строки, когда не хватает места.
Это свойство незаменимо, когда ряд карточек, тегов или навигационных ссылок должен корректно перестраиваться на узких экранах вместо того, чтобы выходить за пределы или сжиматься.
flex-wrap влияет только на flex-элементы, поэтому оно не имеет эффекта без display: flex (или display: inline-flex) у родительского элемента. Если flex-контейнер не содержит элементов, свойство не делает ничего.
Свойство flex-wrap входит в набор свойств CSS3 и тесно связано с flex-direction: вместе они часто записываются в виде сокращения flex-flow.
В этой главе объясняется каждое значение flex-wrap, как перенос взаимодействует с главной осью, и на что стоит обратить внимание.
| Начальное значение | nowrap |
|---|---|
| Применяется к | Flex-контейнерам. |
| Наследуется | Нет. |
| Анимируемо | Нет. |
| Версия | CSS3 |
| DOM Syntax | object.style.flexWrap = "wrap-reverse"; |
Как работает перенос
Перенос происходит вдоль поперечной оси, перпендикулярной главной оси, заданной свойством flex-direction:
- При значении
flex-direction: rowпо умолчанию элементы располагаются слева направо. Когда включёнflex-wrap: wrapи горизонтальное пространство заканчивается, следующий элемент начинает новую строку ниже. - При
flex-direction: columnэлементы выстраиваются сверху вниз, а перенос помещает лишние элементы в новый столбец рядом с первым.
Важное следствие: когда flex-wrap равно nowrap (по умолчанию), flex-элементы сжимаются, чтобы вместиться в контейнер (срабатывает flex-shrink), или выходят за его пределы. Только при разрешённом переносе элементы сохраняют предпочтительный размер и переходят на новую строку.
Когда элементы переносятся на несколько строк, пространство между строками определяется свойством align-content, а выравнивание элементов внутри одной строки — свойством align-items. На одной строке без переноса align-content не имеет эффекта.
Синтаксис
Синтаксис свойства CSS flex-wrap
flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;Пример свойства flex-wrap со значением "wrap":
Контейнер ниже имеет ширину 200px и содержит шесть блоков шириной 50px каждый (итого 300px контента). При flex-wrap: wrap блоки, которые не помещаются в первой строке, переносятся во вторую, а не сжимаются:
Пример свойства CSS flex-wrap со значением wrap
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.wrap {
width: 200px;
height: 200px;
border: 1px solid #cccccc;
display: flex;
flex-wrap: wrap;
}
.wrap div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>The flex-wrap Property</h2>
<div class="wrap">
<div style="background-color:coral;">A</div>
<div style="background-color:lightblue;">B</div>
<div style="background-color:khaki;">C</div>
<div style="background-color:pink;">D</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">F</div>
</div>
</body>
</html>Пример свойства flex-wrap со значением "nowrap":
При значении nowrap по умолчанию те же шесть блоков размещаются в одну строку. Поскольку они не помещаются, их ширина уменьшается относительно заявленных 50px:
Пример свойства CSS flex-wrap со значением nowrap
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: nowrap;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-wrap 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-wrap со значением "wrap-reverse":
wrap-reverse также позволяет элементам переноситься на несколько строк, но меняет направление поперечной оси: строки располагаются снизу вверх, поэтому первая строка оказывается внизу:
Пример свойства CSS flex-wrap со значением wrap-reverse
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: wrap-reverse;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-wrap 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>Значения
| Значение | Описание | Попробовать |
|---|---|---|
| nowrap | Определяет, что flex-элементы не будут переноситься. Это значение по умолчанию. | Попробовать » |
| wrap | Определяет, что flex-элементы будут переноситься при необходимости. | Попробовать » |
| wrap-reverse | Определяет, что flex-элементы будут переноситься в обратном порядке при необходимости. | Попробовать » |
| initial | Устанавливает значение свойства по умолчанию. | Попробовать » |
| inherit | Наследует значение свойства от родительского элемента. |
Сокращение flex-flow
Поскольку flex-wrap почти всегда задаётся вместе с flex-direction, CSS предоставляет сокращение flex-flow для обоих свойств:
/* flex-direction flex-wrap */
flex-flow: row wrap;Это эквивалентно раздельной записи flex-direction: row; и flex-wrap: wrap;.
Связанные свойства
display— задайтеdisplay: flexродительскому элементу, чтобы создать flex-контейнер, на который действуетflex-wrap.flex-direction— задаёт главную ось (строка или столбец), вокруг которой происходит перенос.align-content— распределяет пространство между перенесёнными строками (имеет значение только при переносе элементов).justify-content— выравнивает элементы вдоль главной оси.flex— управляет тем, как отдельные элементы растягиваются и сжимаются, заполняя каждую строку.