Flexbox: новый принцип CSS верстки макетов

Flexbox это совершенно новый набор CSS свойств, который позволяет верстальщикам создавать гибкие макеты для сайтов. Он отлично подходит для так называемых отзывчивых макетов, потому что резко снижает сложность верстки. Современные браузеры (включая IE10+, мобильные браузеры iOS и Andrioid) уже поддерживают Flexbox, так что если вы еще не слышали о Flexbox, то самое время, чтобы изучить.

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

caniuse-flexbox.jpg

Flexbox готов к использованию

Web изначально задумывался как механизм для обмена научными документами. С тех пор технологии сильно шагнули вперёд, но мы до сих пор используем используем CSS, корнями которого являются те цифровые публикации.

Действительно, CSS верстка и позиционирование элементов на странице являются одними из самых сложных понятий для верстальщиков, независимо от их опыта. Для верстки они используют такие свойства как float, clear, display: block, display: inline для верстки макетов своих сайтов. Но теперь, с новым CSS свойством display: flexbox можно задавать направление, расположение, и промежутки между элементами страницы.

display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;      /* TWEENER - IE 10 */
display: -webkit-flex;     /* NEW - Chrome */
display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

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

Использование Flexbox и его свойства

Объединение Flexbox и CSS медиа запросы (media queries) является мощным инструментом. В примере ниже я сделал упрощённую версию главной страницы сайта Treehouse, использую современный подход mobile-first и flexbox. Откройте этот пример и поизменяйте размер окна браузера.

На первый взгляд может показаться что в примере нет ничего особенного, но если взглянуть на код, то можно увидеть, что верстка выполнена без использования свойства float: left или float: right. Не используются также свойства display: block или display: inline.

Свойство DISPLAY: FLEX

display: flex | inline-flex

Свойство display: flex применяется к родительскому контейнеру, который становится "гибким контейнером" (flex-контейнер), а так же все его прямые потомки являются "гибкими элементами" (flex элементы). Гибкий контейнер имеет главную ось, которая задаёт основное направление для своих прямых потомков (гибких элементов). Поперечная ось перпендикулярна главной оси. Обе эти оси имеют набор свойств с помощью которых можно управлять расположением гибких элементов по отношению друг к другу в контейнере.

flex-container-illustration.png

Так же можно создавать вложенные flex-контейнеры, как я сделал в примере выше, т.к. свойство display: flex не наследуется. Блокам с классами .header и .nav назначено свойство display: flex. Это похоже на реализацию строк и столбцов в CSS фреймворке Foundation.

Примечания:

  • CSS-столбцы columns не работают с flex-контейнером.
  • float, clear и vertical-align не работают с flex-элементами

Свойство FLEX-DIRECTION

flex-direction: row | row-reverse | column | column-reverse
  • row (по умолчанию): слева направо для ltr, справа налево для rtl;
  • row-reverse: справа налево для ltr, слева направо для rtl;
  • column: аналогично row, сверху вниз;
  • column-reverse: аналогично row-reverse, снизу вверх.

Свойство flex-direction задаёт направление главной оси. Главная ось определяет направление и не обязательно горизонтальное, например при просмотре на мобильных браузерах все элементы контейнера (flex item) группируются в 1 колонку друг за другом. Это задаётся с помощью flex-direction: column. Чтобы элементы контейнера располагались в горизонтальном направлении достаточно задать flex-direction: row.

Т.к. по умолчанию значение свойства flex-direction: row поэтому, даже если вы не объявите его, элементы flex-контейнера будут располагаться горизонтально.

Свойство FLEX

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

Значение по умолчанию: flex: 0 1 auto.

Свойство flex применяется для элементов flex-контейнера. Это короткая запись, с помощью которой можно задать сразу несколько отдельных свойств: flex-grow, flex-shrink и flex-basis.

Свойства flex-grow и flex-shrink определяют сколько места будет занимать каждый элемент flex-контейнера по отношению друг к другу. По умолчанию flex-grow: 0, а flex-shrink: 1. Это означает, что все элементы будут пропорциональны друг к другу.

Свойство flex-basis определяет размеры элементов, чтобы заполнить всё пространство flex-контейнера. Значение этого свойства - auto.

Последние 2 свойства flex-shrink и flex-basis не обязательны. В примере выше, я установил значение flex: 1 для блока с классом .nav, что одно и тоже если прописать ему flex-grow: 1. Другим flex-элементом в контейнере .header является элемент h1 с классом .logo, для которого установлено flex-grow: 0, поэтому элемент .nav будет всегда занимать больше места чем элемент .logo.

Свойство JUSTIFY-CONTENT

justify-content: flex-start | flex-end | center | space-between | space-around

Одно из моих любимых свойств, свойство justify-content определяет выравнивание относительно главной оси, помогая распределить оставшееся свободное место внутри flex-контейнера, например, когда его элементы уже не «тянутся», либо тянутся, но уже достигли своего максимального размера. Также позволяет в некотором роде управлять выравниванием элементов при выходе за границы строки.

  • flex-start (по умолчанию): элементы сдвигаются к началу строки;
  • flex-end: элементы сдвигаются к концу строки;
  • center: элементы выравниваются по центру строки;
  • space-between: элементы распределяются равномерно (первый элемент в начале строки, последний — в конце);
  • space-around: элементы распределяются равномерно с равным расстоянием между собой и границами строки.

Иллюстрация работы свойства justyfy-content:

flexbox-justify-content-property.png

В моём примере, блоку с классом .header я прописал значение justify-content: space-between. Это означает, что первый элемент flex-контейнера будет располагаться в начале main start (см. изображение в главе Свойство DISPLAY: FLEX), а последний элемент будет располагаться в конце main end. Все элементы flex контейнера которые находятся между первым и последним будут распределены равномерно.

Для элемента с классом .nav я применил свойство justify-content: space-around для распределения всего пространства равномерно с отступами вокруг каждого элемента flex-контейнера.

В заключении

Я перечислил только некоторые свойства, которые есть у модуля flexbox. Это достаточно новая технология верстки, и по мере её внедрения в проекты я буду дополнять статью новыми полезными свойствами, которые сильно упростят создание качественных отзывчивых макетов для сайтов.