- PVSM.RU - https://www.pvsm.ru -
Веб развивается, появляются все новые возможности разметки страниц для верстальщиков, в том числе в этом помогают новые свойства в CSS. В этой статье описаны некоторые из них: многоколоночность, flexbox и сеточная разметка.
Поддержку новых функций браузерами можно проверить на сайте caniuse.com [1]:
При помощи multi-column можно легко разбивать текст на несколько колонок без использования костылей в виде позиционирования и float'ов. Можно указывать ширину каждой колонки, их количество будет ограничиваться только шириной браузера:
#mcexample {
column-width: 13ems;
}
Можно указывать количество колонок:
#mcexample {
column-count: 3;
}
Меняем стиль колонок:
#mcexample {
columns: auto 13em; /* column-count,
column-width */
column-gap: 1em;
column-rule: 1em solid black; /* width, style, color */
}
По сути главная и самая ожидаемая функция этого свойства — это возможность перетекания текста из одной колонки в другую. Непонятно только, почему оно не появилось намного раньше.
Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке. Официальная спецификация находится здесь: CSS Flexible Box Layout Module [2]
На tutplus.com [3] есть простые наглядные примеры применения flexbox. Можно располагать дочерние блоки с нужным выравниванием, горизонтальным:
или вертикальным:
Растягивать на всю ширину:
И многое другое. Вызов 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 [4] — представлена Microsoft в апреле этого года, поэтому разметка работает пока только в Internet Explorer 10 [5]. Но учитывая фундаментальность проделанной работы, поддержка функционала другими браузерами — это вопрос времени.
Сеточная разметка позволяет размещать контент отдельно от лэйаута, используя строки и колонки. Для начала необходимо объявить сетку:
#gridexample {
display: -ms-grid;
-ms-grid-rows: 30px 5em auto;
-ms-grid-columns: auto 70px 2fr 1fr;
}
Расшифровка:
Добавляем элемент в первую строку второй колонки:
#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 [6].
Автор: grokru
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/css3/16735
Ссылки в тексте:
[1] caniuse.com: http://caniuse.com
[2] CSS Flexible Box Layout Module: http://www.w3.org/TR/css3-flexbox/
[3] tutplus.com: http://net.tutsplus.com/tutorials/html-css-techniques/an-introduction-to-css-flexbox/
[4] CSS Grid Layout: http://www.w3.org/TR/css3-grid-layout/
[5] только в Internet Explorer 10: http://caniuse.com/#feat=css-grid
[6] на сайте Griddle от Microsoft: http://ie.microsoft.com/testdrive/html5/griddle/default.html
[7] Master the new CSS layout properties: http://www.netmagazine.com/tutorials/master-new-css-layout-properties
[8] Quick hits with the flexible box model: http://www.html5rocks.com/en/tutorials/flexbox/quick/
[9] IE 10 Platform Preview 1: The Future of Adaptive Web Design: http://channel9.msdn.com/events/MIX/MIX11/HTM11
Нажмите здесь для печати.