Свойство CSS column-fill
Свойство CSS column-fill задаёт способ заполнения колонок: равномерно или последовательно. Значения: balance, auto. Примеры.
Свойство column-fill управляет распределением содержимого по колонкам многоколоночного макета — либо равномерно по всем колонкам, либо последовательно, заполняя каждую колонку поочерёдно.
Оно входит в состав свойств CSS3 и используется совместно с column-count и columns для создания газетных макетов.
Когда использовать
column-fill даёт видимый эффект только тогда, когда у многоколоночного контейнера задана фиксированная высота (например, height: 200px). Без ограничения по высоте браузеру незачем прекращать заполнение колонки, поэтому оба значения выглядят одинаково.
Существуют два значимых значения:
balance(по умолчанию) — старается сделать все колонки примерно одинаковой длины, чтобы блок колонок выглядел ровным и содержимое заканчивалось примерно на одной строке в каждой. Это обычно нужно для читаемого, газетного текста.auto— заполняет первую колонку до полной высоты контейнера, затем переходит к следующей и т.д. Последняя колонка может оказаться намного короче остальных. Используйте это значение, когда визуальный порядок колонок важнее равномерности.
| Начальное значение | balance |
|---|---|
| Применяется к | Многоколоночным элементам. |
| Наследуется | Нет. |
| Анимируется | Нет. |
| Версия | CSS3 |
| DOM Синтаксис | object.style.columnFill = "balance"; |
Синтаксис
column-fill: auto | balance | balance-all | initial | inherit;Пример свойства column-fill со значением balance
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.balance {
column-count: 4;
column-rule: 1px solid black;
column-fill: balance;
}
</style>
</head>
<body>
<h1>Column-fill property example</h1>
<p class="balance">
This is a bunch of text split into multiple columns. The CSS column-fill property is used to spread the contents evenly across all the columns. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>Результат
При значении balance текст распределяется так, что все четыре колонки заканчиваются примерно на одной высоте.
Пример свойства column-fill со значением auto
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.auto {
height: 200px;
column-count: 3;
column-rule: 1px solid black;
column-fill: auto;
}
</style>
</head>
<body>
<h1>Column-fill property example</h1>
<p class="auto">
This is a bunch of text split into multiple columns. The CSS column-fill property is used to fill columns sequentially. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>Здесь у контейнера задана фиксированная высота height: 200px. При значении auto первая колонка заполняется до этой высоты, прежде чем текст перейдёт в следующую, поэтому последующие колонки могут оказаться короче — или пустыми, если текст закончится.
Значения
| Значение | Описание |
|---|---|
| auto | Последовательно заполняет колонки. |
| balance | Равномерно распределяет содержимое между колонками. В постраничных медиа балансируется только последняя страница. |
| balance-all | Равномерно распределяет содержимое между колонками. В постраничных медиа балансируются все страницы. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Поддержка браузерами
column-fill поддерживается всеми современными браузерами. Обратите внимание, что balance-all имеет ограниченную поддержку, а во многих движках auto ведёт себя как balance, если многоколоночный контейнер не разбит на фрагменты (например, при постраничном выводе или при фиксированной высоте).
Связанные свойства
column-count— задаёт количество создаваемых колонок.columns— сокращённое свойство дляcolumn-widthиcolumn-count.column-rule— рисует линию между колонками.