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 Значение элемента наследуется от родительского элемента.

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

chrome firefox safari opera
29.0+
21-28 -webkit-
28.0+ 9.0+
6.1-8.0 -webkit-
12.1+

Практикуйте свои знания

Какие значения могут быть у свойства CSS 'flex-wrap'?
Считаете ли это полезным?