- PVSM.RU - https://www.pvsm.ru -

Новое в CSS3: многоколоночность, flexbox, сеточная разметка

Веб развивается, появляются все новые возможности разметки страниц для верстальщиков, в том числе в этом помогают новые свойства в CSS. В этой статье описаны некоторые из них: многоколоночность, flexbox и сеточная разметка.

Поддержку новых функций браузерами можно проверить на сайте caniuse.com [1]:

Новое в CSS3: многоколоночность, flexbox, сеточная разметка

Multi-column

При помощи 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

Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке. Официальная спецификация находится здесь: CSS Flexible Box Layout Module [2]

На tutplus.com [3] есть простые наглядные примеры применения flexbox. Можно располагать дочерние блоки с нужным выравниванием, горизонтальным:
Новое в CSS3: многоколоночность, flexbox, сеточная разметка

или вертикальным:
Новое в CSS3: многоколоночность, flexbox, сеточная разметка

Растягивать на всю ширину:
Новое в CSS3: многоколоночность, 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]. Но учитывая фундаментальность проделанной работы, поддержка функционала другими браузерами — это вопрос времени.

Новое в CSS3: многоколоночность, flexbox, сеточная разметка

Сеточная разметка позволяет размещать контент отдельно от лэйаута, используя строки и колонки. Для начала необходимо объявить сетку:

#gridexample {
     display: -ms-grid;
    -ms-grid-rows: 30px 5em auto;
    -ms-grid-columns: auto 70px 2fr 1fr;
  }

Расшифровка:

  • Первая строка — 30 px в высоту
  • Вторая строка — 5 ems в высоту
  • Размер третьей строки будет зависить от количества контента
  • Размер первой колонки будет зависить от количества контента
  • Вторая колонка — 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 [6].

Новое в CSS3: многоколоночность, flexbox, сеточная разметка

Материалы по теме

Автор: 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