CSS свойство flex-wrap
Свойство flex-wrap определяет, должны ли гибкие элементы переноситься или нет. Иными словами, оно определяет, принудительно ли элементы помещаются в одну строку или могут переноситься на несколько строк.
Если гибкие элементы отсутствуют, свойство flex-wrap не окажет никакого эффекта.
Свойство flex-wrap является одним из свойств CSS3.
| Начальное значение | nowrap |
|---|---|
| Применяется к | Flex-контейнеры. |
| Наследуется | Нет. |
| Анимация | Нет. |
| Версия | CSS3 |
| DOM-синтаксис | object.style.flexWrap = "wrap-reverse"; |
Синтаксис
Синтаксис свойства CSS flex-wrap
css
flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;Пример свойства flex-wrap со значением "wrap":
Пример свойства CSS flex-wrap со значением wrap
html
<!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":
Пример свойства CSS flex-wrap со значением nowrap
html
<!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":
Пример свойства CSS flex-wrap со значением wrap-reverse
html
<!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 | Определяет, что гибкие элементы не будут переноситься. Это значение по умолчанию для данного свойства. | Запустить » |
| wrap | Определяет, что гибкие элементы будут переноситься при необходимости. | Запустить » |
| wrap-reverse | Определяет, что гибкие элементы будут переноситься в обратном порядке при необходимости. | Запустить » |
| initial | Заставляет свойство использовать значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Какова цель свойства 'flex-wrap' в CSS?