column-fill

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

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

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

Попробовать

Синтаксис

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

Свойство column-fill задается одним из ключевых значений, перечисленных ниже. Начальное значение balance, поэтому содержимое будет сбалансировано по колонкам.

Значения

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

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

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

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

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

column-fill = 
  auto         |
  balance      |
  balance-all

Примеры

Выравнивание содержимого колонок

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: #ff9;
  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
`column-fill`	50	12	5217–74	37	98	50	5217–79	37	98	5.0	50
`auto`	50	12	17	37	8	50	17	37	8	5.0	50
`balance`	50	12	17	37	8	50	17	37	8	5.0	50

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

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

См. также

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