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…