css властивість flex-wrap


Властивість flex-wrap визначає, чи повинні гнучкі елементи переноситися чи ні. Тобто елементи контейнера можна обгорнути на декілька рядків або розмістити їх в одному. За допомогою flex-wrap можна також задати напрямок, в якому будуть укладатися рядки.

Властивість `flex-wrap`

Властивість flex-wrap визначає, чи елементи мають розташовутися примусово на одному рядку або можуть бути перенесені на наступний рядок. Якщо встановлено, щоб елементи переносилися на декілька рядків, властивість також визначає поперечну вісь, яка визначає напрям, за яким складаються нові рядки.

Нагадаємо: поперечна вісь - це вісь перпендикулярна головній осі.

Нотатка:

Властивість flex працює тільки зі гнучкими елементами, тобто з тими елементами, у котрих властивість display встановлена як flex (display: flex; або display: inline-flex).

Порада:

Якщо знесення рядків дозволено, тоді за допомогою властивості flex-direction можна контролювати напрямок, в якому будуть шикуватися гнучкі елементи.

Синтакс

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;
}

Додаткові посилання

Всі Коментарі (0)

Зареєструйся на сайті, аби мати змогу залишати коментарі. Зареєструватися  чи
Немає Коментарів