MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

Начальное значениеbalance
Применяется кмультиколоночные элементы
Наследуетсянет
Отображениеvisual, но в сплошной среде, не имеет никакого эффекта при переполнении колонок
Обработка значениякак указано
Анимируемостьнет
Канонический порядокуникальный не однозначный порядок, определённый формальной грамматикой

Синтаксис

column-fill: auto;
column-fill: balance;

/* Значения по умолчанию */
column-fill: inherit;
column-fill: initial;
column-fill: unset;

Значения

auto
Высота столбцов не контролируется.
balance
Разделяет содержимое на равные по высоте столбцы.

Возможные значения

auto | balance

Примеры

.content-box {
  column-count: 4;
  column-rule: 1px solid black;
  column-fill: balance;
  height: 200px;
}

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

Спецификация Статус Комментарий
CSS Multi-column Layout Module
Определение 'column-fill' в этой спецификации.
Кандидат в рекомендации Значение по умолчанию

Поддержка браузерами

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Да) 13.0 (13.0)-moz ? ? ?
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support ? (Да) 13.0 (13.0)-moz ? ? ? (Да)

Метки документа и участники

 Внесли вклад в эту страницу: fscholz, Sebastianz, Varinetz
 Обновлялась последний раз: fscholz,