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

❮ Назад Вперед ❯

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

Значение по умолчанию	balance
Применяется	К многоколоночным элементам.
Наследуется	Нет
Анимируемое	Нет
Версия	CSS3
DOM синтаксис	object.style.columnFill = "balance";

Синтаксис

column-fill: auto | balance | balance-all |  initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .balance {
      column-count: 4;
      column-rule: 1px solid black;
      column-fill: balance;
      }
    </style>
  </head>
  <h2>Пример свойства column-fill</h2>
  <body>
    <p class="balance">
      Текст, распределенный внутри нескольких колонок. CSS свойство column-fill используется для распределения контента внутри колонок.
    </p>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
auto	Последовательно заполняет колонки.
balance	Equally divides the content between columns. In paged media, only the last page is balanced.Равномерно распределяет контент внутри колонок. При печати это правило относится только к последней странице.
balance-all	Равномерно распределяет контент внутри колонок. При печати это правило относится ко всем страницам.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.