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

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

Сокращённое свойство flex-flow можно использовать для задания свойств flex-direction и flex-wrap, которые определяют главную и поперечную оси flex-контейнера соответственно.

Попробуйте

flex-wrap: nowrap;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

flex-wrap: wrap balance;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div>Item One</div>
    <div>Item Two</div>
    <div>Item Three</div>
    <div>Item Four</div>
    <div>Item Five</div>
    <div>Item Six</div>
    <div>Item Seven</div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  width: 80%;
  display: flex;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  width: 60px;
  margin: 10px;
}

Синтаксис

/* Keyword values */
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
flex-wrap: balance;
flex-wrap: wrap balance;
flex-wrap: balance wrap-reverse;

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

Значения

Это свойство задаётся одним значением из следующего списка или двумя значениями, разделёнными пробелом, при использовании balance:

nowrap

Flex-элементы размещаются в одной строке, что может привести к переполнению flex-контейнера. Это начальное значение.

wrap

Flex-элементы могут переноситься на несколько строк.

wrap-reverse

Работает так же, как wrap, но строки располагаются в обратном порядке.

balance

Определяет, что flex-элементы, перенесённые на несколько строк, распределяются так, чтобы длины строк были как можно более похожи. Если balance указано как единственное ключевое слово, для другого ключевого слова используется значение по умолчанию wrap.

Описание

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

Начальное значение nowrap указывает, что все элементы должны располагаться в одной flex-строке, а значит, они могут переполнить контейнер. Ключевые слова wrap и wrap-reverse предотвращают переполнение, указывая, что flex-элементы могут размещаться, или переноситься, на несколько строк.

При значении wrap cross-start соответствует inline-start или block-start в зависимости от значения flex-direction и текущего режима письма. При значении wrap-reverse cross-start соответствует inline-end или block-end.

Балансировка распределения flex-элементов

По умолчанию, если указано wrap или wrap-reverse, каждая flex-строка заполняется flex-элементами, прежде чем элементы будут перенесены на следующую строку. Это может привести к неравномерному распределению элементов: последняя flex-строка может содержать меньше элементов. Если значения flex-grow этих элементов ненулевые, дополнительное доступное пространство распределяется между меньшим числом элементов, из-за чего они становятся намного больше элементов в заполненных flex-строках.

Ключевое слово balance можно использовать для более равномерного распределения элементов по строкам. При необходимости свойство flex-line-count позволяет задать минимальное количество строк, по которым следует распределить элементы.

Если balance указано как единственное ключевое слово, для другого ключевого слова используется значение по умолчанию wrap.

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

Если balance указано вместе с nowrap, свойство недопустимо.

Формальное определение

Формальный синтаксис

flex-wrap = 
  nowrap |
  [ wrap | wrap-reverse ] ||
  balance

Примеры

Задание значений переноса flex-контейнера

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: white;
  font: 100 24px/100px sans-serif;
  height: 150px;
  width: 897px;
  text-align: center;
}

.content div,
.content1 div,
.content2 div {
  height: 50%;
  width: 300px;
}
.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;
}

Результат

Демонстрация ключевого слова balance

В этом примере демонстрируется влияние ключевого слова balance в свойстве flex-wrap и различных значений flex-line-count.

HTML

<form>
  <div>
    <input type="checkbox" id="reverse" name="reverse" />
    <label for="reverse">Set <code>wrap-reverse</code>?</label>
  </div>
  <div>
    <input type="checkbox" id="balance" name="balance" checked />
    <label for="balance">Set <code>balance</code>?</label>
  </div>
  <div>
    <label for="line-count"><code>flex-line-count</code></label>
    <input
      type="range"
      id="line-count"
      name="line-count"
      min="1"
      max="12"
      value="3" />
    <output>3</output>
  </div>
</form>

<hr />

<p>Currently set: <code>flex-wrap: wrap; flex-line-count: 3;</code></p>

<hr />

Мы добавили контейнер <div> с class, равным box, и десятью дочерними элементами <div>.

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div>
  <div>Ten</div>
</div>

Мы также добавили элементы управления, позволяющие изменять параметры flex-контейнера, в том числе:

• Переключение flex-wrap между значениями wrap и wrap-reverse.
• Включение и отключение ключевого слова balance.
• Изменение значения flex-line-count.

Для краткости HTML и JavaScript скрыты.

CSS

Мы применяем display: flex к .box, превращая его во flex-контейнер, а затем задаём значения flex-wrap и flex-line-count, чтобы дочерние flex-элементы равномерно переносились как минимум на три flex-строки. Значения можно изменить в интерактивном примере. Мы также задаём дочерним flex-элементам значение flex 1 1 150px, чтобы их базовая ширина составляла 150px, а оставшееся пространство равномерно распределялось между элементами в одной flex-строке.

.box {
  display: flex;
  flex-wrap: wrap balance;
  flex-line-count: 3;
}

.box > * {
  flex: 1 1 150px;
}

.box {
  width: 100%;
  border: 2px dotted rgb(96 139 168);
  gap: 10px;
}

.box > * {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}

* {
  box-sizing: border-box;
}

body {
  padding: 10px 30px;
}

@supports not (flex-wrap: balance) {
  body::before {
    content: "Your browser does not support flex-wrap: balance.";
    background-color: wheat;
    text-align: center;
    padding: 1rem 0;

    z-index: 1;
    position: fixed;
    inset: 40% 0 auto;
  }
}

Для краткости остальная часть CSS скрыта.

const boxElem = document.querySelector(".box");
const outputElem = document.querySelector("output");
const pCodeElem = document.querySelector("p code");
const reverseInput = document.getElementById("reverse");
const balanceInput = document.getElementById("balance");
const lineCountInput = document.getElementById("line-count");

let wrapValue = "wrap";
let lineCountValue = "3";

function updateCurrentlySet() {
  pCodeElem.textContent = `flex-wrap: ${wrapValue}; flex-line-count: ${lineCountValue};`;
}

function setFlexWrap() {
  wrapValue = "";
  if (reverseInput.checked) {
    wrapValue += "wrap-reverse";
  } else {
    wrapValue += "wrap";
  }

  if (balanceInput.checked) {
    wrapValue += " balance";
  }

  boxElem.style.flexWrap = wrapValue;
  updateCurrentlySet();
}

function setFlexLineCount() {
  lineCountValue = lineCountInput.value;
  boxElem.style.flexLineCount = lineCountValue;
  outputElem.textContent = lineCountValue;
  updateCurrentlySet();
}

reverseInput.addEventListener("change", setFlexWrap);
balanceInput.addEventListener("change", setFlexWrap);
lineCountInput.addEventListener("input", setFlexLineCount);

Результат

Измените настройки элементов управления, чтобы увидеть, как они влияют на результат. Обратите внимание, что:

• Переключение между wrap и wrap-reverse меняет направление расположения flex-строк вдоль поперечной оси.
• Значение balance приводит к равномерному распределению flex-элементов по доступным flex-строкам.
• Изменение значения flex-line-count меняет минимальное число строк, по которым будут распределены элементы. Свойство flex-line-count, а значит, и ползунок, не влияют на результат, если флажок balance не установлен.
• По умолчанию flex-элементы распределены по четырём flex-строкам, поэтому изменение flex-line-count на значение меньше 5 не даст эффекта. Значения от 5 до 10 добавляют ещё одну flex-строку.
• Поскольку flex-элементов 10, значения flex-line-count, равные 10 или больше, дают одинаковый результат: по одному элементу будет размещено в каждой из 10 flex-строк.

Спецификации

Совместимость с браузерами

См. также

• flex-direction
• Сокращённое свойство flex-flow
• Основные понятия flexbox
• Освоение переноса flex-элементов
• Модуль гибкой раскладки CSS