CSS свойство flex-wrap

❮ Назад Вперед ❯

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

Если нет гибких элементов, свойство flex-wrap не будет иметь эффекта.

Значение по умолчанию	nowrap
Применяется	К флекс-контейнерам.
Наследуется	Нет
Анимируемое	Нет
Версия	CSS3
DOM синтаксис	object.style.flexWrap = "wrap-reverse";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .example {
      width: 200px;
      height: 200px;
      border: 1px solid #c3c3c3;
      display: -webkit-flex; 
      -webkit-flex-wrap: wrap; 
      display: flex;
      flex-wrap: nowrap;
      }
      .example div {
      width: 50px;
      height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства flex-wrap</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #ccc;">C</div>
      <div style="background-color: #666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

Попробуйте сами!

Пример, где флекс-элементы расположены в обратном порядке:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .example {
      width: 200px;
      height: 200px;
      border: 1px solid #c3c3c3;
      display: -webkit-flex; 
      -webkit-flex-wrap: wrap; 
      display: flex;
      flex-wrap: wrap-reverse;
      }
      .example div {
      width: 50px;
      height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства flex-wrap</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #ccc;">C</div>
      <div style="background-color: #666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

Попробуйте сами!

Значения

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