flex-wrap
Властивість CSS flex-wrap
(гнучке загортання) задає те, чи змушені гнучкі елементи ставати в одну лінію, чи можуть загортатись на наступні. Якщо загортання – дозволене, то ця властивість задає напрям, в якому нагромаджуються лінії.
Спробуйте його в дії
Властивість-скорочення flex-flow
може вживатися для задання водночас властивостей flex-direction
і flex-wrap
, у такий спосіб визначаючи головну та поперечну осі гнучкого контейнера.
Синтаксис
flex-wrap: nowrap; /* Усталене значення */
flex-wrap: wrap;
flex-wrap: wrap-reverse;
/* Глобальні значення */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: revert;
flex-wrap: revert-layer;
flex-wrap: unset;
Значення
Властивість flex-wrap
задається у вигляді єдиного ключового слова, вибраного серед значень нижче:
nowrap
Гнучкі елементи розкладаються на єдиній лінії, що може призвести до переповнення гнучкого контейнера. Точка cross-start – рівносильна inline-start або block-start залежно від значення
flex-direction
. Це значення – усталене.wrap
Гнучкі елементи розриваються на декілька ліній. Точка cross-start – рівносильна inline-start або block-start, залежно від поточного напрямку письма, а також значення
flex-direction
.wrap-reverse
Поводиться так само, як
wrap
, але cross-start і cross-end стоять навпаки.
Формальне визначення
Початкове значення | nowrap |
---|---|
Успадковується | ні |
Обчислене значення | as specified |
Формальний синтаксис
nowrap | wrap | wrap-reverse
Приклади
Задання значень загортання гнучкого контейнера
HTML
<h4>Це приклад для flex-wrap:wrap</h4>
<div class="content">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
<h4>Це приклад для flex-wrap:nowrap</h4>
<div class="content1">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
<h4>Це приклад для flex-wrap:wrap-reverse</h4>
<div class="content2">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
CSS
/* Загальні стилі */
.content,
.content1,
.content2 {
color: #fff;
font: 100 24px/100px sans-serif;
height: 150px;
width: 897px;
text-align: center;
}
.content div,
.content1 div,
.content2 div {
height: 50%;
width: 300px;
}
.red {
background: orangered;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
}
/* Стилі флексбоксу */
.content {
display: flex;
flex-wrap: wrap;
}
.content1 {
display: flex;
flex-wrap: nowrap;
}
.content2 {
display: flex;
flex-wrap: wrap-reverse;
}
Результати
Специфікації
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
flex-wrap
|
Chrome Full support 29 | Edge Full support 12 | Firefox Full support 28 | Internet Explorer Partial support 11 | Opera Full support 17 | Safari Full support 9 | WebView Android Full support 4.4 | Chrome Android Full support 29 | Firefox for Android Full support 52 | Opera Android Full support 18 | Safari on iOS Full support 9 | Samsung Internet Full support 2.0 |