Введение в CSS Flexbox
Что такое Flexbox
Flexbox это сокращение от “flexible box” и является относительно новой технологией, предоставляющей интересные и удобные методы для построения сложных и гибких блоков на веб странице с помощью CSS.
Главная задача Flexbox модели — это заставить блоки лучше заполнять доступное пространство на странице и наделить их дополнительными свойствами для лучшего управления их размерами и выравниванием.
Почему стоит использовать Flexbox
Модель Flexbox принесла новые дополнительные возможности при верстке веб сайтов и приложений. До появления этой модели для позиционирования блоков на странице использовались главным образом свойства position и float. Используя их, можно сверстать любую структуру, но есть ситуации, когда, они не могу легко решить некоторые задачи и ими сложно добиться нужных результатов. Например, вертикальное центрирование элементов внутри блока или создание колонок одинаковой высоты. На данный момент, когда я разрабатываю сайты, я очень часто использую flex элементы в своей верстке.
Структура Flex модели
Чтобы легче понять все термины и свойства относящиеся к Flexbox рассмотрим следующую гипотетическую разметку.
В данном примере, мы имеем родительский элемент (flex container) и три вложенных дочерних элемента (flex item). Для родительского элемента задано свойство display: flex, этого достаточно чтобы система превратилась в Flexbox.
Внутри родительского блока элементы выравниваются и определяют свой размер по двум осям. Вдоль главной оси (main axis) располагаются элементы, по умолчанию, если не определено свойство flex-direction, это слева на право. Начало этой оси называется main start, а конец main end. Ось, которая проходит перпендикулярно главной называется поперечной (cross axis). Вдоль этой оси выравниваются элементы. Начало этой оси называется cross start, а конец cross end. По умолчанию поперечная ось начинается вверху элемента flex container и заканчивается внизу.
Изменяя значения свойства flex-direction можно менять направления этих осей. Доступные следующие значения row (по умолчанию, как в примере выше), row-reverse, column, column-reverse.
Детальнее о всех свойствах Flexbox читайте в статье:
Поддержка браузерами
На данный момент свойства Flexbox хорошо поддерживаются всеми современными браузерами, если не считать Internet Explorer, одиннадцатая версия которого (IE11) все еще используется приблизительно одним процентом пользователей. Если эти пользователи вам не важны, то можете смело использовать любые свойства из семейства Flexbox.
Но даже если вы не хотите пренебрегать одним процентом, и вы хотите, чтобы разработанный веб сайт хорошо отображался у всех пользователей, то вы все равно можете использовать данную технологию, ведь даже в IE11 есть какая-та поддержка флекс модели. Но, к сожалению, вам придется тщательно тестировать ваш сайт, так как эта поддержка весьма ограниченная и полна багов.