Создание сайта на CMS WordPress: обучение и хостинг

СВОЙСТВО FLEX-WRAP

Свойство flex-wrap указывает, должны ли флекс элементы переноситься или нет.

Поддержка браузеров


11+

Синтаксис

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit

Значения свойства

Значение	Описание
nowrap	Указывает, что флекс элементы не будут переносится. Это значение по умолчанию.
wrap	Указывает, что флекс элементы будут переносится.
wrap-reverse	Указывает, что флекс элементы будут переносится в обратном порядке.
initial	Устанавливает значение по умолчанию.
inherit	Унаследует значение свойства от родительского элемента.

Песочница

<div class="flex">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>

HTML

.flex {
  width: 350px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-wrap: wrap-reverse;
}

.item {
  flex-basis: 100px;
  padding: 10px
}

.item:nth-child(1) {
    background: yellow
}

.item:nth-child(2) {
  background: blue;
}

.item:nth-child(3) {
    background: beige
}

.item:nth-child(4) {
    background: gray
}

.item:nth-child(5) {
    background: coral
}

CSS

← Перейти к списку свойств