Веб развивается, появляются все новые возможности разметки страниц для верстальщиков, в том числе в этом помогают новые свойства в CSS. В этой статье я описал некоторые из них: многоколоночность, flexbox и сеточная разметка.
Поддержку новых функций браузерами можно проверить на сайте caniuse.com:
![](https://habrastorage.org/r/w780q1/storage2/a59/2c1/d35/a592c1d355bb6df95de4cb8f0b14dc74.jpg)
При помощи multi-column можно легко разбивать текст на несколько колонок без использования костылей в виде позиционирования и float'ов. Можно указывать ширину каждой колонки, их количество будет ограничиваться только шириной браузера:
Можно указывать количество колонок:
Меняем стиль колонок:
По сути главная и самая ожидаемая функция этого свойства — это возможность перетекания текста из одной колонки в другую. Непонятно только, почему оно не появилось намного раньше.
Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке. Официальная спецификация находится здесь: CSS Flexible Box Layout Module
На tutplus.com есть простые наглядные примеры применения flexbox. Можно располагать дочерние блоки с нужным выравниванием, горизонтальным:
![](https://habrastorage.org/r/w1560/storage2/459/9c5/2e0/4599c52e0e53116a3e697108364115e4.png)
или вертикальным:
![](https://habrastorage.org/r/w1560/storage2/7cf/c10/434/7cfc10434b75d5275c2611081f429391.png)
Растягивать на всю ширину:
![](https://habrastorage.org/r/w1560/storage2/052/6eb/e76/0526ebe76efc2b905e1751185a9b5adc.png)
И многое другое. Вызов flexbox очень прост:
Спецификация — CSS Grid Layout — представлена Microsoft в апреле этого года, поэтому разметка работает пока только в Internet Explorer 10. Но учитывая фундаментальность проделанной работы, поддержка функционала другими браузерами — это вопрос времени.
![](https://habrastorage.org/r/w780q1/storage2/cde/e50/c9d/cdee50c9d1486368024544ec3d0e1d6a.jpg)
Сеточная разметка позволяет размещать контент отдельно от лэйаута, используя строки и колонки. Для начала необходимо объявить сетку:
Расшифровка:
Добавляем элемент в первую строку второй колонки:
Можно растянуть элемент на всю ширину с помощью grid-row-span:
Или добавить выравнивание с помощью grid-row-align или grid-column-align:
Пример использования Многоколоночности, flexbox и сеточной разметки можно посмотреть на сайте Griddle от Microsoft.
![](https://habrastorage.org/r/w780q1/storage2/67b/93d/57f/67b93d57f839f0a326e739b55f957d79.jpg)
Поддержку новых функций браузерами можно проверить на сайте caniuse.com:
![](https://habrastorage.org/storage2/a59/2c1/d35/a592c1d355bb6df95de4cb8f0b14dc74.jpg)
Multi-column
При помощи multi-column можно легко разбивать текст на несколько колонок без использования костылей в виде позиционирования и float'ов. Можно указывать ширину каждой колонки, их количество будет ограничиваться только шириной браузера:
#mcexample {
column-width: 13em;
}
Можно указывать количество колонок:
#mcexample {
column-count: 3;
}
Меняем стиль колонок:
#mcexample {
columns: auto 13em; /* column-count,
column-width */
column-gap: 1em;
column-rule: 1em solid black; /* width, style, color */
}
По сути главная и самая ожидаемая функция этого свойства — это возможность перетекания текста из одной колонки в другую. Непонятно только, почему оно не появилось намного раньше.
Flexbox
Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке. Официальная спецификация находится здесь: CSS Flexible Box Layout Module
На tutplus.com есть простые наглядные примеры применения flexbox. Можно располагать дочерние блоки с нужным выравниванием, горизонтальным:
![](https://habrastorage.org/storage2/459/9c5/2e0/4599c52e0e53116a3e697108364115e4.png)
или вертикальным:
![](https://habrastorage.org/storage2/7cf/c10/434/7cfc10434b75d5275c2611081f429391.png)
Растягивать на всю ширину:
![](https://habrastorage.org/storage2/052/6eb/e76/0526ebe76efc2b905e1751185a9b5adc.png)
И многое другое. Вызов flexbox очень прост:
<ul>
<li>An item</li>
<li>Another item</li>
<li>The last item</li>
</ul>
ul {
/* Old Syntax */
display: -webkit-box;
/* New Syntax */
display: -webkit-flexbox;
}
Сеточная разметка
Спецификация — CSS Grid Layout — представлена Microsoft в апреле этого года, поэтому разметка работает пока только в Internet Explorer 10. Но учитывая фундаментальность проделанной работы, поддержка функционала другими браузерами — это вопрос времени.
![](https://habrastorage.org/storage2/cde/e50/c9d/cdee50c9d1486368024544ec3d0e1d6a.jpg)
Сеточная разметка позволяет размещать контент отдельно от лэйаута, используя строки и колонки. Для начала необходимо объявить сетку:
#gridexample {
display: -ms-grid;
-ms-grid-rows: 30px 5em auto;
-ms-grid-columns: auto 70px 2fr 1fr;
}
Расшифровка:
- Первая строка — 30 px в высоту
- Вторая строка — 5 em в высоту
- Размер третьей строки будет зависить от количества контента
- Размер первой колонки будет зависить от количества контента
- Вторая колонка — 70 px в ширину
- Третья и четвертая колонки займут 2/3 и 1/3 ширины соответсвенно
Добавляем элемент в первую строку второй колонки:
#griditem1 {
-ms-grid-row: 1;
-ms-grid-column: 2;
}
Можно растянуть элемент на всю ширину с помощью grid-row-span:
#griditem1 {
-ms-grid-row: 1;
-ms-grid-column: 2;
-ms-grid-row-span: 2;
}
Или добавить выравнивание с помощью grid-row-align или grid-column-align:
#griditem1 {
-ms-grid-row: 1;
-ms-grid-column: 2;
-ms-grid-column-align: center;
}
Пример использования Многоколоночности, flexbox и сеточной разметки можно посмотреть на сайте Griddle от Microsoft.
![](https://habrastorage.org/storage2/67b/93d/57f/67b93d57f839f0a326e739b55f957d79.jpg)
Материалы по теме
- An Introduction to the CSS Flexbox Module, автор Umar Hansa
- Master the new CSS layout properties, автор Thomas Lewis
- Quick hits with the flexible box model, автор Paul Irish
- Презентация IE 10 Platform Preview 1: The Future of Adaptive Web Design, автор Markus Mielke