English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Свойство CSS flex-wrap определяет, нужно ли принудительно поместить элементы flex в одну строку или распределить их по нескольким строкам или столбцам в зависимости от доступного пространства в контейнере flex.
В таблице приведено описание использования и истории версий этого свойства, а также синтаксис использования этого свойства в скриптах на JavaScript.
| Значение по умолчанию: | nowrap |
|---|---|
| Подходит для: | Эластичный контейнер |
| Наследование: | Нет |
| Анимировано: | Нет.См. также Атрибуты анимации. |
| Версия: | Новые функции CSS3 |
| JavaScript грамматика: | object.style.flexWrap="wrap-reverse" |
Грамматика этого свойства такая:
flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit
Ниже приведен пример того, как использовать свойство flex-wrap.
.flex-container {
/* Safari */
display: -webkit-flex;
-webkit-flex-wrap: nowrap;
display: flex;
flex-wrap: nowrap;
}Проверьте, как это выглядит‹/›В таблице ниже описаны значения этого свойства.
| Значение | Описание |
|---|---|
| nowrap | Значение по умолчанию. Указать, что эластичные элементы не разбиваются на строки или столбцы. |
| wrap | Указать, если необходимо, эластичные элементы будут разбиты на несколько строк. |
| wrap-reverse | Как и wrap, но элементы будут выводиться в обратном порядке. |
| initial | Установите этот атрибут в его значение по умолчанию. |
| inherit | Если указано, то связанные элементы используют значение свойства flex-wrap родительского элемента. |
Совместимость браузеров для свойства flex-wrap, числа в таблице представляют собой минимальную версию браузера, поддерживающего это свойство; все основные браузеры поддерживают это свойство.
|
Узнайте подробнее из следующих учебников:Многостраничная разметка CSS3.
Соответствующие атрибуты:align-content,align-items,align-self,display,flex,flex-basis,flex-direction,flex-flow,flex-grow,flex-shrink,justify-content,min-height,min-width,order.