Свойство CSS `column-fill`

Базовая поддержка Широко доступно

Эта возможность хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с марта 2017 года.

Свойство column-fill CSS управляет распределением содержимого элемента при разделении на колонки.

Попробуйте

column-fill: auto;

column-fill: balance;

<section id="default-example">
  <p id="example-element">
    London. Michaelmas term lately over, and the Lord Chancellor sitting in
    Lincoln's Inn Hall. Implacable November weather.
  </p>
</section>

#example-element {
  width: 100%;
  height: 90%;
  columns: 3;
  text-align: left;
}

Синтаксис

/* Keyword values */
column-fill: auto;
column-fill: balance;

/* Global values */
column-fill: inherit;
column-fill: initial;
column-fill: revert;
column-fill: revert-layer;
column-fill: unset;

Значения

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

auto: Колонки заполняются последовательно. Содержимое занимает только необходимое ему пространство, поэтому некоторые колонки могут остаться пустыми.
balance: Содержимое равномерно распределяется между колонками. Во фрагментированных контекстах, таких как постраничные медиа, равномерно распределяется только последний фрагмент. Поэтому в постраничных медиа равномерно распределяется только последняя страница. Это значение используется по умолчанию.

Спецификация определяет значение balance-all, при котором содержимое равномерно распределяется между колонками во фрагментированных контекстах, таких как постраничные медиа. Это значение пока не поддерживается ни одним браузером.

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

Исходное значение	balance
Применяется к	много колоночным элементам
Наследуется	нет
Вычисленное значение	как задано
Тип анимации	дискретный

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

column-fill = 
  auto |
  balance

Примеры

Равномерное распределение содержимого по колонкам

HTML

<p class="fill-auto">
  This paragraph fills columns one at a time. Since all of the text can fit in
  the first column, the others are empty.
</p>

<p class="fill-balance">
  This paragraph attempts to balance the amount of content in each column.
</p>

CSS

p {
  height: 7em;
  background: #ffff99;
  columns: 3;
  column-rule: 1px solid;
}

p.fill-auto {
  column-fill: auto;
}

p.fill-balance {
  column-fill: balance;
}

Результат

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

Спецификация
Модуль многоколоночной компоновки CSS, уровень 1 # cf

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

	Настольные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari на iOS	Samsung Internet	WebView для Android	WebView на iOS
`column-fill`	50	12	52 17–74	37	9 8	50	52 17–79	37	9 8	5.0	50	9 8
`auto`	50	12	17	37	8	50	17	37	8	5.0	50	8
`balance`	50	12	17	37	8	50	17	37	8	5.0	50	8

Предупреждение: При использовании column-fill в разных браузерах возникают проблемы взаимодействия и ошибки из-за нерешённых вопросов в спецификации.

В частности, при использовании column-fill: auto для последовательного заполнения колонок Chrome учитывает это свойство только в том случае, если для много колоночного контейнера задан размер по блочной оси (например, высота при горизонтальном режиме письма). Firefox всегда учитывает это свойство, поэтому, если размер не задан, всё содержимое помещается в первую колонку.

См. также

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/column-fill