Почему стоит начать использовать flexbox

Менее 50% процентов используют flexbox в своих проектах. Возможно пока что не все знают об этом замечательном свойстве. В данной статье рассмотрим несколько причин для использования flexbox.
1. Данное свойство поддерживается всеми современными браузерами
Почему я раньше не использовал свойство CSS3 - display:flex? Я не подозревал о широкой поддержки данного свойства всеми современными браузерами. Даже в браузере от майкрософта оно работает с 10 версии IE.
2. Не нужно беспокоиться о синтаксисе
Даже если текущий синтаксис своства flex поддерживается последними версиями браузеров, то как быть, хотя бы, с двумя последними версиями популярных браузеров? Для поддержки последних двух версий браузера достаточно 4 правила для свойства "display".
/* Для поддержки современных браузеров */
.flex-container {
display: flex;
}
/* Для поддержки последних двух версий популярных браузеров */
.flex-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
3. Очень легко начать работу
Нужно признать, что обучитсья flexbox за пару минут не получится. Есть 12 новых свойств, в каждом из которых имеется в среднем по 4 значения. Этот факт может вас остановаить при желании перехода на данное свойство.
Но вам не придется изучать все значения и параметры с нуля. Для большинства случаев достаточно использование трех свойств:
- display - Устанавливает элемент как встроенный элемент или блок flexbox с дочерними элементами
- justify-content - Данное свойство определяет горизонтальное выравнивание элементов внутри flex контейнера
- align-items - Данное свойство определяет вертикальное выравнивание элементов внутри flex контейнера
Даже с этими тремя свойствами мы можем производить различные манипуляции. Когда привыкните к этим свойствам можете попробовать изучить остаьные или узнать из них самое необходимое.
4. Выровнять элементы по центру (как горизонтали, так и вертикали)
Отличным аргументов в пользу использования свойства flexbox, является тот факт, что теперь можно выровнять элемент по центру экрана или блока всего за 4 строчки. Вот пример использования данного выравнивания
.flex-container{
display: flex;
justify-content: center;/* Выравнивание по горизонтали */
align-items: center;/* Выравнивание по вертикали */
border: 2px dashed #000;
}
В результате получим:
5. Изменять параметры, встроенных в контейнер элементов, очень просто.
Одна из проблем с использованием inline-block - стандартный отступ в 4px между элементами, и хотя обойти данную проблемы можно,задав отрицательный margin, это может повлечь за собой другие проблемы.
С flexbox мы можем без проблем использовать строчные элементы и выровнять их по всей ширине контейнера,задав такие стили:
.flex-container{display: flex;}
.flex-item{width: 20%;}
Результатом данного действия увидим:
Помимо этого можно задать равномерные отступы для элементов контейнера:
.flex-container{
display: flex;
justify-content: space-around;
}
Так же можно задать выравнивание только средних элементов, без использования first-child и last-child
.flex-container{
display: flex;
justify-content: space-between;
}
6. Сложные элементы легко создать
И одна из главных причин для использования flexbox`a - это простое создание сложных макетов. В предыдущих примерах было показано как работать с одиночными элементами. В данном примере покажу как работать с несколькими элементами внутри контейнера с display:flex
Для примера используем общий макет ценовой таблицы:
В ней видим три блока <div>, причем средний в два раза превышает ширину двух других. Для достижения данной верстки с помощью свойства flex, мы можем написать такой код:
.flex-container {
display : flex ; /*Контейнеру задаем флекс для позиционирования внутренних элементов*/
align-items : center ; /*внутренние элементы выравниваем по вертикали
}
.flex-items:not(:nth-child(2)) { /*Для всех кроме второго элемента задаем размер равный единице и высоту, меньшую чем у среднего блока*/
flex-grow : 1 ;
height : 300px ;
}
.flex-items:nth-child(2) { /*Для второго элемента зададим ширину 2, т.е. в два раза превышающую соседние элементы flex-items и высоту на 50px большую чем у других элементов*/
flex-grow : 2 ;
height : 350px ;
}
Отличные примеры верскти на flexbox: Полное руководство по flexbox