flex-wrap — CSS: Каскадные таблицы стилей
Свойство CSS flex-wrap устанавливает, будут ли гибкие элементы принудительно помещаться в одну строку или могут переноситься на несколько строк. Если перенос разрешен, он устанавливает направление, в котором строки располагаются друг над другом.
Дополнительные свойства и сведения см. в разделе Использование гибких блоков CSS.
flex-wrap: nowrap; /* Значение по умолчанию */ flex-wrap: обернуть; flex-wrap: обернуть-обратно; /* Глобальные значения */ flex-wrap: наследовать; flex-wrap: начальный; flex-wrap: вернуться; flex-wrap: возвратный слой; flex-wrap: не установлено;
Свойство flex-wrap указано как одно ключевое слово, выбранное из списка значений ниже.
Значения
Допустимы следующие значения:
-
nowrap Элементы Flex расположены в одну строку, что может привести к переполнению контейнера Flex.
cross-start flex-direction. Это значение по умолчанию.-
обертка Элементы Flex разбиваются на несколько строк. cross-start либо эквивалентен start , либо перед в зависимости от значения
flex-direction, а cross-end противоположен указанному cross-start .-
обратная сторона Ведет себя так же, как
обтекание, но с перекрестным запуском и кросс-энд переставлены.
cross-start | Initial value | nowrap |
|---|---|
| Applies to | flex containers |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
flex-wrap =
nowrap |
упаковка |
обратная сторона
Установка значений обтекания flex-контейнера
HTML
Это пример для flex-wrap:wrap
<дел> <дел>1 <дел>2 <дел>3
содержание,
.content1,
.content2 {
цвет: #fff;
шрифт: 100 24px/100px без засечек;
высота: 150 пикселей;
ширина: 897 пикселей;
выравнивание текста: по центру;
}
.контент раздел,
.content1 раздел,
.content2 раздел {
высота: 50%;
ширина: 300 пикселей;
}
.красный {
фон: оранжево-красный;
}
.зеленый {
фон: желто-зеленый;
}
.синий {
фон: стальной синий;
}
/* Стили Flexbox */
.содержание {
дисплей: гибкий;
flex-wrap: обернуть;
}
.content1 {
дисплей: гибкий;
гибкая обертка: nowrap;
}
.content2 {
дисплей: гибкий;
flex-wrap: обернуть-обратно;
}
Как оборачивать текст вокруг изображения
Компания TemplateMonster не только продает шаблоны и плагины для разных CMS (WordPress, Joomla, HTML, PrestaShop, Magento и т.д.), как многие думают, но и оказывает услуги технической поддержки сайтов.
