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

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

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

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

правити

Порада

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

автор: Svitlana правити

Нотатка

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

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

Властивість flex-wrap може отримувати 5 значень:

nowrap

Знесення заборонене. Гнучкі елементи шикуються в одну лінію. Без задання.

автор: Svitlana

правити

wrap

Гнучкі елементи шикуються в кілька рядків, їх напрямок задається властивістю flex-direction.

автор: Svitlana

правити

wrap-reverse

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

автор: Svitlana

правити

initial

Встановлює цю властивість в значення без задання

автор: Svitlana

правити

inherit

Успадкує значення властивості від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
flex-wrap	29.0	28.0	9.0	12.1	13.0	11.0

Підтримка: мобільні переглядачі

Переглядач
flex-wrap	4.4	28.0	9.2

Приклади

+ запропонувати свій приклад у пісочниці

<div class="row">
    <div>один</div>
    <div>два</div>
    <div>три</div>
    <div>чотири</div>
    <div>п'ять</div>
    <div>шість</div>
</div>

.row {
    display: flex;
    flex-wrap: wrap;
}

.row div {
    width: 140px;
    padding: 8px;
    border: 1px solid #0172ad;
    text-align: center;
}