css властивість column-fill

Властивість column-fill визначає, як заповнювати стовпці - збалансовувати чи ні.

Зміст може бути або збалансований, а значить, вміст у всіх стовпцях буде мати однакову висоту, або, якщо використовувати auto, просто заповнить вільний простір.

правити

Нотатка

На даний момент використання цієї властивості обмежене і не працює в жодному сучасному браузері!

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

Властивість column-fill може отримувати 5 значень:

balance

Контент рівномірно розподіляється між колонок. Ширина стовпчиків буде однаковою. Без задання.

автор: Svitlana

правити

auto

Стовпці заповнюються послідовно. Ширина стовпчиків буде різною.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання.

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена).

автор: Svitlana

правити

balance-all

Контент рівномірно розподіляється між колонок. При друку це правило відноситься до всіх сторінок.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
column-fill	50.0	52 <br> 13.0 -moz-	7.0	37.0	12.0	10.0

Підтримка: мобільні переглядачі

Переглядач
column-fill	Не підтримується	52 <br> 13.0 -moz-	7.1

Приклади

+ запропонувати свій приклад у пісочниці

<div class="cols balance">balance. Багатоколонкова верстка ділить текст автоматично: браузер сам вирішує, де перервати рядок і почати нову колонку. Що довший текст, то краще видно поділ — тому цей абзац навмисно багатослівний і ще й трохи повторюється, щоб колонкам було чим заповнитися.</div>
<div class="cols auto">auto. Багатоколонкова верстка ділить текст автоматично: браузер сам вирішує, де перервати рядок і почати нову колонку. Що довший текст, то краще видно поділ — тому цей абзац навмисно багатослівний і ще й трохи повторюється, щоб колонкам було чим заповнитися.</div>

.cols {
    columns: 3;
    height: 140px;
    margin-bottom: 12px;
    border: 1px solid #ccc;
}

.balance { column-fill: balance; }
.auto    { column-fill: auto; }