flex-wrapВластивість є суб-властивість модуля Flexible Box Layout.
Він визначає, чи гнучкі елементи накладаються в один рядок, або їх можна перетікати в кілька рядків. Якщо встановлено кілька ліній, це також визначає поперечну вісь, яка визначає напрямок, у який укладаються нові лінії.
Нагадування: поперечна вісь - це вісь, перпендикулярна до головної осі. Його напрямок залежить від напрямку головної осі.
flex-wrapВластивість приймає 3 різні значення:
nowrap( за замовчуванням ): однорядковий, який може призвести до переповнення контейнераwrap: багаторядкові, напрямок визначаєтьсяflex-directionwrap-reverse: багаторядкові, протилежні напрямку, визначеномуflex-direction
Синтаксис
flex-wrap: nowrap | wrap | wrap-reverse .flex-container ( flex-wrap: wrap; )Демо
У наступній демонстрації:
- Для червоного списку встановлено значення
nowrap - Для жовтого списку встановлено значення
wrap - Для синього списку встановлено значення
wrap-reverse
Примітка: flex-directionвстановлюється значення за замовчуванням: row.
Див. Pen Flex-wrap: демо від CSS-Tricks (@ css-tricks) на CodePen.
Підтримка браузера
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6,1 * |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 * |
Для отримання додаткової інформації про змішування синтаксисів, щоб отримати найкращу підтримку браузера, зверніться до цієї статті (CSS-хитрощі) або цієї статті (DevOpera).