Перейти к содержанию

column-fill

Свойство column-fill определяет, как контент должен распределяться внутри колонок.

Демо

Колонки и таблицы

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
/* Keyword values */
column-fill: auto;
column-fill: balance;
column-fill: balance-all;

/* Global values */
column-fill: inherit;
column-fill: initial;
column-fill: revert;
column-fill: revert-layer;
column-fill: unset;

Значения

auto

Колонки заполняются последовательно.

balance

Контент равномерно распределяется между колонок. При печати это правило относится только к последней странице.

balance-all

Контент равномерно распределяется между колонок. При печати это правило относится ко всем страницам.

Firefox поддерживает свойство -moz-column-fill.

Значение по-умолчанию:

1
column-fill: balance;

Применяется к многоколоночным элементам

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

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

Can I Use multicolumn? Data on support for the multicolumn feature across the major browsers from caniuse.com.

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>column-fill</title>
        <style>
            .book {
                columns: 3 200px;
                -webkit-columns: 3 200px;
                -moz-columns: 3 200px;
                column-fill: balance-all;
                -webkit-column-fill: balance-all;
                -moz-column-fill: balance-all;
            }
        </style>
    </head>
    <body>
        <div class="book">
            <p>
                Как было показано выше, кризис жанра дает
                звукоряд, и здесь в качестве модуса
                конструктивных элементов используется ряд
                каких-либо единых длительностей. Фьюжн, по
                определению, полифигурно варьирует
                гармонический интервал, и если в одних
                голосах или пластах музыкальной ткани
                сочинения еще продолжаются
                конструктивно-композиционные процессы
                предыдущей части, то в других — происходит
                становление новых. Трехчастная фактурная
                форма, в первом приближении, возможна.
                Форшлаг изящно продолжает хамбакер, и если в
                одних голосах или пластах музыкальной ткани
                сочинения еще продолжаются
                конструктивно-композиционные процессы
                предыдущей части, то в других — происходит
                становление новых.
            </p>
        </div>
    </body>
</html>

Комментарии