css властивість flex-wrap
Властивість flex-wrap визначає, чи повинні гнучкі елементи переноситися чи ні. Тобто елементи контейнера можна обгорнути на декілька рядків або розмістити їх в одному. За допомогою flex-wrap можна також задати напрямок, в якому будуть укладатися рядки.
Властивість flex-wrap визначає, чи елементи мають розташовутися примусово на одному рядку або можуть бути перенесені на наступний рядок. Якщо встановлено, щоб елементи переносилися на декілька рядків, властивість також визначає поперечну вісь, яка визначає напрям, за яким складаються нові рядки.
Нагадаємо: поперечна вісь - це вісь перпендикулярна головній осі.
| Нотатка: | Властивість |
| Порада: | Якщо знесення рядків дозволено, тоді за допомогою властивості |
Синтаксис
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;Властивість flex-wrap може отримувати 5 значень:
nowrapЗнесення заборонене. Гнучкі елементи шикуються в одну лінію. Без задання.
wrapГнучкі елементи шикуються в кілька рядків, їх напрямок задається властивістю
flex-direction.wrap-reverseГнучкі елементи шикуються в кілька рядків, в напрямку, протилежному
flex-direction.initialВстановлює цю властивість в значення без задання
inheritУспадкує значення властивості від свого батьківського елемента
| Значення без задання: | nowrap |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.flexWrap="nowrap" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| flex-wrap | 29.0 |
11.0 |
28.0 |
9.0 |
12.1 |
13.0 |
| Переглядач | |||
|---|---|---|---|
| flex-wrap | 4.4 |
28.0 |
9.2 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Демонстрація дії різних значень властивості
Простий приклад роботи властивості
Приклад роботи властивості
Робимо елемент <div> гнучким і дозволяємо знесення при необхідності.
div {
display: flex;
flex-wrap: wrap;
}