flex-wrap¶
Свойство flex-wrap
указывает, следует ли флексам располагаться в одну строку или можно занять несколько строк.
Если перенос строк допускается, то свойство также позволяет контролировать направление, в котором выкладываются строки.
Flexbox и выравнивание
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- order
Синтаксис¶
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
/* Global values */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: unset;
Значения¶
Значение по-умолчанию: nowrap
Наследуется: нет
Применяется к флекс-элементам
Анимируется: нет
nowrap
- Флексы выстраиваются в одну линию.
wrap
- Флексы выстраиваются в несколько строк, их направление задаётся свойством
flex-direction
. wrap-reverse
- Флексы выстраиваются в несколько строк, в направлении, противоположном
flex-direction
.
Примечание¶
Safari до версии 9 поддерживает свойство -webkit-flex-wrap
.
Спецификации¶
Поддержка браузерами¶
Описание и примеры¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>flex-wrap</title>
<style>
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
}
.flex-item {
padding: 20px;
background: #f0f0f0;
border-radius: 5px;
margin: 1rem;
text-align: center;
}
</style>
</head>
<body>
<ul class="flex-container">
<li class="flex-item">
<img src="/css/aquaria1.jpg" alt="" />
</li>
<li class="flex-item">
<img src="/css/aquaria2.jpg" alt="" />
</li>
<li class="flex-item">
<img src="/css/aquaria3.jpg" alt="" />
</li>
</ul>
</body>
</html>
Результат: