Это 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, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6,1 * |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 * |
Для получения дополнительной информации о том, как смешивать синтаксисы, чтобы получить лучшую поддержку браузера, обратитесь к этой статье (CSS-Tricks) или этой статье (DevOpera).