Flexbox это совершенно новый набор CSS свойств, который позволяет верстальщикам создавать гибкие макеты для сайтов. Он отлично подходит для так называемых отзывчивых макетов, потому что резко снижает сложность верстки. Современные браузеры (включая IE10+, мобильные браузеры iOS и Andrioid) уже поддерживают Flexbox, так что если вы еще не слышали о Flexbox, то самое время, чтобы изучить.
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-контейнеры, как я сделал в примере выше, т.к. свойство 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:
В моём примере, блоку с классом .header
я прописал значение justify-content: space-between
. Это означает, что первый элемент flex-контейнера будет располагаться в начале main start (см. изображение в главе Свойство DISPLAY: FLEX), а последний элемент будет располагаться в конце main end. Все элементы flex контейнера которые находятся между первым и последним будут распределены равномерно.
Для элемента с классом .nav я применил свойство justify-content: space-around
для распределения всего пространства равномерно с отступами вокруг каждого элемента flex-контейнера.
В заключении
Я перечислил только некоторые свойства, которые есть у модуля flexbox. Это достаточно новая технология верстки, и по мере её внедрения в проекты я буду дополнять статью новыми полезными свойствами, которые сильно упростят создание качественных отзывчивых макетов для сайтов.