---
title: flex-wrap
slug: Web/CSS/flex-wrap
translation_of: Web/CSS/flex-wrap
---
<div>{{ CSSRef}}</div>

<p>Свойство <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>flex-wrap</code></strong> задаёт правила вывода flex-элементов —  в одну строку или в несколько, с переносом блоков. Если перенос разрешён, то возможно задать направление, в котором выводятся блоки.</p>

<pre class="brush:css no-line-numbers notranslate">flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

/* Global values */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: unset;
</pre>

<p>{{cssinfo}}</p>

<p>Подробнее по свойствам и общей информации смотрите <a href="/en/CSS/Using_CSS_flexible_boxes" title="/en/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a>.</p>

<h2 id="Syntax">Syntax</h2>

<p>Свойство <code>flex-wrap</code> может содержать одно из следующих ниже значений.</p>

<h3 id="Значения">Значения</h3>

<p>Допускаются следующие значения:</p>

<dl>
 <dt><code>nowrap</code></dt>
 <dd>Расположение в одну линию, может привести к переполнению контейнера. Свойство <strong>cross-start</strong> эквивалентно <strong>start</strong> или <strong>before</strong> в зависимости от значения {{cssxref("flex-direction")}}.</dd>
 <dt><code>wrap</code></dt>
 <dd>Расположение в несколько линий. Свойство <strong>cross-start</strong> эквивалентно <strong>start</strong> или <strong>before</strong> в зависимости от значения <code>flex-direction</code> и свойство <strong>cross-end</strong> противоположно <strong>cross-start</strong>.</dd>
 <dt><code>wrap-reverse</code></dt>
 <dd>Ведёт себя так же, как и <code>wrap</code> но <strong>cross-start</strong> и <strong>cross-end</strong> инвертированы.</dd>
 <dt>
 <h3 id="Formal_syntax">Formal syntax</h3>
 </dt>
</dl>

{{csssyntax}}

<h2 id="Examples">Examples</h2>

<h3 id="HTML">HTML</h3>

<div id="Live_Sample">
<pre class="brush: html notranslate">&lt;h4&gt;This is an example for flex-wrap:wrap &lt;/h4&gt;
&lt;div class="content"&gt;
  &lt;div class="red"&gt;1&lt;/div&gt;
  &lt;div class="green"&gt;2&lt;/div&gt;
  &lt;div class="blue"&gt;3&lt;/div&gt;
&lt;/div&gt;
&lt;h4&gt;This is an example for flex-wrap:nowrap &lt;/h4&gt;
&lt;div class="content1"&gt;
  &lt;div class="red"&gt;1&lt;/div&gt;
  &lt;div class="green"&gt;2&lt;/div&gt;
  &lt;div class="blue"&gt;3&lt;/div&gt;
&lt;/div&gt;
&lt;h4&gt;This is an example for flex-wrap:wrap-reverse &lt;/h4&gt;
&lt;div class="content2"&gt;
  &lt;div class="red"&gt;1&lt;/div&gt;
  &lt;div class="green"&gt;2&lt;/div&gt;
  &lt;div class="blue"&gt;3&lt;/div&gt;
&lt;/div&gt;
</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css notranslate">/* Common Styles */
.content,
.content1,
.content2 {
    color: #fff;
    font: 100 24px/100px sans-serif;
    height: 150px;
    text-align: center;
}

.content div,
.content1 div,
.content2 div {
    height: 50%;
    width: 50%;
}
.red {
    background: orangered;
}
.green {
    background: yellowgreen;
}
.blue {
    background: steelblue;
}

/* Flexbox Styles */
.content {
    display: flex;
    flex-wrap: wrap;
}
.content1 {
    display: flex;
    flex-wrap: nowrap;
}
.content2 {
    display: flex;
    flex-wrap: wrap-reverse;
}

</pre>
</div>

<h3 id="Results">Results</h3>

<p>{{ EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap') }}</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th>Specification</th>
   <th>Status</th>
   <th>Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap') }}</td>
   <td>{{ Spec2('CSS3 Flexbox') }}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{Compat("css.properties.flex-wrap")}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="/en-US/docs/CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li>
</ul>