Свойство CSS `flex-line-count`

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

Попробуйте

flex-line-count: 1;

flex-line-count: 3;

flex-line-count: 4;

<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>
</section>

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

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

Синтаксис

/* Integer values */
flex-line-count: 1;
flex-line-count: 3;
flex-line-count: 12;

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

Значения

Для этого свойства указывается следующее значение:

<integer>

Положительное целое число, задающее минимальное количество flex-линий, по которым будут распределены сбалансированные flex-элементы с переносом. Значение по умолчанию — 1.

Описание

Свойство flex-line-count задаёт минимальное количество flex-линий, по которым будут распределены flex-элементы в flex-контейнерах с переносом и балансировкой — другими словами, в flex-контейнерах, у которых свойство flex-wrap или flex-flow содержит ключевое слово balance вместе с ключевым словом wrap или wrap-reverse.

Одно из основных применений flex-line-count — создание сбалансированного набора из двух (или более) столбцов независимо от количества элементов в списке. В таких случаях явное задание height или max-height не сработает, поскольку неизвестно, сколько будет содержимого, и в итоге столбцов может оказаться меньше или больше, чем нужно. Пример реализации см. в разделе Создание сбалансированных столбцов.

Если balance не задано или flex-элементы не настроены на перенос на несколько flex-линий, свойство flex-line-count не оказывает влияния.

Если значение flex-line-count равно количеству flex-элементов или превышает его, на каждой flex-линии будет по одному flex-элементу.

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

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

flex-line-count = 
  <integer [1,∞]>

<integer> = 
  <number-token>

Примеры

Влияние различных значений flex-line-count

В этом примере показано, как различные значения flex-line-count влияют на четыре блока.

HTML

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

<div class="box" id="box-no-balance">
  <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>

<div class="box" id="box1">...</div>
<div class="box" id="box2">...</div>
<div class="box" id="box3">...</div>

<p>No <code>balance</code></p>

<div class="box" id="box-no-balance">
  <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>

<p><code>flex-line-count: 3</code></p>

<div class="box" id="box1">
  <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>

<p><code>flex-line-count: 4</code></p>

<div class="box" id="box2">
  <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>

<p><code>flex-line-count: 5</code></p>

<div class="box" id="box3">
  <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>

CSS

* {
  box-sizing: border-box;
}

.box {
  width: 100%;
  border: 2px dotted gray;
  margin-bottom: 20px;
  gap: 10px;
}

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

Мы применяем display: flex ко всем блокам, чтобы сделать их flex-контейнерами, а затем задаём значение flex-wrap, равное wrap balance, чтобы дочерние flex-элементы переносились на несколько сбалансированных линий.

.box {
  display: flex;
  flex-wrap: wrap balance;
}

Также мы задаём дочерним flex-элементам значение flex, равное 1 1 150px, поэтому их базовая ширина составляет 150px, а избыточное пространство равномерно распределяется между элементами в каждой flex-линии.

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

Для flex-контейнера #box-no-balance мы отключаем балансировку, тем самым отменяя подсчёт линий: для этого переопределяем исходное значение flex-wrap: wrap balance на wrap. Для каждого flex-контейнера мы задаём своё значение flex-line-count, постепенно увеличивая его, чтобы дочерние элементы располагались на всё большем количестве flex-линий.

#box-no-balance {
  flex-line-count: 6;
  flex-wrap: wrap;
}

#box1 {
  flex-line-count: 3;
}

#box2 {
  flex-line-count: 4;
}

#box3 {
  flex-line-count: 5;
}

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

Результат

Обратите внимание на следующее:

• Поскольку для первого flex-контейнера в значении flex-wrap не задано ключевое слово balance, его дочерние элементы не распределяются сбалансированно, а значение flex-line-count игнорируется.
• Объявление flex-line-count: 3 для второго flex-контейнера не влияет на расположение дочерних flex-элементов: по умолчанию flex-элементы распределены по четырём flex-линиям, поэтому значение 4 или меньше не оказывает влияния.

Создание сбалансированных столбцов

В этом примере показано, как с помощью flex-line-count создать сбалансированный набор из двух столбцов.

HTML

Мы добавляем элемент <ol>, содержащий десять элементов <li>.

<ol>
  <li>
    <a href="#">The Silent Cartographer</a>, published by Meridian House,
    released March 12, 2014.
  </li>
  <li>
    <a href="#">Echoes of the Fallow Field</a>, published by Northbridge Press,
    released July 4, 2009.
  </li>

  ...
</ol>

<ol>
  <li>
    <a href="#">The Silent Cartographer</a>, published by Meridian House,
    released March 12, 2014.
  </li>
  <li>
    <a href="#">Echoes of the Fallow Field</a>, published by Northbridge Press,
    released July 4, 2009.
  </li>
  <li>
    <a href="#">A Ledger of Small Regrets</a>, published by Ashwood & Kline,
    released November 21, 2017.
  </li>
  <li>
    <a href="#">The Clockmaker's Daughter's Shadow</a>, published by Hollow Pine
    Publishing, released February 8, 2011.
  </li>
  <li>
    <a href="#">Salt and Signal</a>, published by Redcliffe Editions, released
    September 30, 2019.
  </li>
  <li>
    <a href="#">Under a Borrowed Sky</a>, published by Fenwick & Marsh, released
    May 16, 2006.
  </li>
  <li>
    <a href="#">The Last Cartel of Winter</a>, published by Graywolf Bindery,
    released January 2, 2021.
  </li>
  <li>
    <a href="#">Notes from an Unfinished Atlas</a>, published by Coastline
    Books, released June 27, 2013.
  </li>
  <li>
    <a href="#">The Weight of Empty Rooms</a>, published by Draymoor House,
    released October 15, 2008.
  </li>
  <li>
    <a href="#">A Brief History of Almost Everyone</a>, published by Ferngate
    Press, released April 9, 2022.
  </li>
</ol>

CSS

Для списка мы задаём значение display, равное flex. С помощью сокращённого свойства flex-flow задаём значение flex-direction, равное column, и значение flex-wrap, равное balance, чтобы flex-линии располагались в столбцах и балансировались при переносе. Значение gap — 10px 40px — задаёт промежуток 10px между flex-элементами внутри каждого столбца и 40px между flex-линиями.

Наконец, мы задаём значение flex-line-count, равное 2. Это означает, что, даже если для списка не задана фиксированная высота, его содержимое всегда будет переноситься в два сбалансированных столбца независимо от объёма содержимого.

ol {
  display: flex;
  gap: 10px 40px;
  flex-flow: column balance;
  flex-line-count: 2;
}

* {
  box-sizing: border-box;
}

body {
  padding: 10px 30px;
}

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

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

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

Результат

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

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

См. также

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