column-fill
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since март 2017 г..
Свойство column-fill применяется к родительскому элементу, разбитому на столбцы и указывает как содержимое располагается внутри столбца (column). Если значение свойства column-fill установлено как balanced, то содержимое во всех столбцах будет иметь одинаковую высоту. В случае использования значения auto, содержимое занимает столько пространства сколько ему потребуется.
| Начальное значение | balance |
|---|---|
| Применяется к | мультиколоночные элементы |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | discrete |
Синтаксис
css
column-fill: auto;
column-fill: balance;
/* Значения по умолчанию */
column-fill: inherit;
column-fill: initial;
column-fill: unset;
Значения
Возможные значения
column-fill =
auto |
balance |
balance-all
Примеры
css
.content-box {
column-count: 4;
column-rule: 1px solid black;
column-fill: balance;
height: 200px;
}
Спецификации
| Specification |
|---|
| CSS Multi-column Layout Module Level 1 # cf |
Совместимость с браузерами
Loading…