Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

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

Начальное значениеnowrap
Применяется кflex-контейнеры
Наследуетсянет
Отображениевизуальный
Обработка значениякак указано
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

See Using CSS flexible boxes for more properties and information.

Syntax

The flex-wrap property is specified as a single keyword chosen from the list of values below.

Значения

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

nowrap
The flex items are laid out in a single line which may cause the flex container to overflow. The cross-start is either equivalent to start or before depending flex-direction value.
wrap
The flex items break into multiple lines. The cross-start is either equivalent to start or before depending flex-direction value and the cross-end is the opposite of the specified cross-start.
wrap-reverse
Behaves the same as wrap but cross-start and cross-end are permuted.

Formal syntax

nowrap | wrap | wrap-reverse

Examples

HTML

<h4>This is an example for flex-wrap:wrap </h4>
<div class="content">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:nowrap </h4>
<div class="content1">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:wrap-reverse </h4>
<div class="content2">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

CSS

/* 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;
}

Results

Specifications

Specification Status Comment
CSS Flexible Box Layout Module
Определение 'flex-wrap' в этой спецификации.
Кандидат в рекомендации  

Browser compatibility

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidiOS SafariSamsung Internet
Базовая поддержкаChrome Полная поддержка 29
Полная поддержка 29
Полная поддержка 21
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Полная поддержка 12Firefox Полная поддержка 28IE Частичная поддержка 11
Замечания
Частичная поддержка 11
Замечания
Замечания Partial support due to large number of bugs present. See Flexbugs.
Opera Полная поддержка 17Safari Полная поддержка 9WebView Android Полная поддержка 4.4
Полная поддержка 4.4
Полная поддержка Да
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Chrome Android Полная поддержка 29
Полная поддержка 29
Полная поддержка 25
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Edge Mobile Полная поддержка 12Firefox Android Полная поддержка 52Opera Android Полная поддержка 12.1Safari iOS Полная поддержка 9.2Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Частичная поддержка  
Частичная поддержка
Совместимость неизвестна  
Совместимость неизвестна
Смотрите замечания реализации.
Смотрите замечания реализации.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

See also

Метки документа и участники

Внесли вклад в эту страницу: yuriy-korsunov, enagorny, dedotmoroz
Обновлялась последний раз: yuriy-korsunov,