flex-wrap
Поддержка браузерами
| 11.0+ | 28.0+ | 29.0+ | 17.0+ | 9.0+ |
Описание
CSS свойство flex-wrap определяет будут ли flex-элементы выстраиваться в одну строку или возможно многострочное размещение. Если многострочное расположение разрешено, то свойство позволяет задавать и направление расположения flex-элементов.
Примечание: если элемент не является flex-контейнером (display: flex), свойство flex-wrap будет проигнорировано.
| Значение по умолчанию: | nowrap |
|---|---|
| Применяется: | к flex-контейнерам |
| Анимируется: | нет |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.flexWrap="nowrap"; |
Синтаксис
flex-wrap: nowrap|wrap|wrap-reverse;
Значения свойства
| Значение | Описание |
|---|---|
| nowrap | Значение по умолчанию. Все flex-элементы располагаются на одной строке. |
| wrap | Указывает, что flex-элементы при необходимости могут переноситься на следующую строку, если на предыдущей не хватает места. |
| wrap-reverse | Указывает, что flex-элементы при необходимости могут переноситься на следующую строку, если на предыдущей не хватает места. Дополнительно flex-элементы начинают располагать снизу вверх, то есть если на нижней строке не хватает места, они переносятся на строку выше. |
Пример
CSS Свойство:
flex-wrap:
Результат:
1
2
3
4
5
CSS Код:
#main {
width: 200px;
height: 200px;
border: 1px solid black;
display: flex;
flex-wrap: nowrap;
}
width: 200px;
height: 200px;
border: 1px solid black;
display: flex;
flex-wrap: nowrap;
}