Контейнеры Flex очень плотно заняли свою позицию в верстке веб-страниц. В верстку они пришли лишь пару лет назад, но каждый уважающий себя верстальщик о них уже точно знает. Они принесли с собой новые возможности обработки отдельных HTML-элементов страницы.
Если попытаться объяснить простым языком, то технология Flexbox с легкостью решает некогда сложные задачи, а именно:
выравнивает элементы по вертикали;
прижимает подвал внизу экрана;
ставит блоки в один ряд, чтобы они заняли все свободное пространство;
растягивает блоки по высоте и ширине;
помогает создать адаптивную верстку.
Эти задачи решаются и без flex-контейнеров, но тогда это происходит какими-то сложными и обходными путями при помощи «костылей» (когда используются свойства CSS не по назначению). Flexbox же все это делает так, как задумано, — просто и легко.
Flexbox поддерживается практически всеми популярными и современными браузерами, поэтому проблем с этой технологией не должно возникать ни у кого.
Flex центрирование по вертикали и горизонтали
Отцентровать элементы на странице, особенно по вертикали, раньше было очень сложно. Для это приходилось искать разнообразные хаки. Но flexbox существенно упростил эту задачу, поэтому теперь можно тратить свои силы и энергию на другие задачи по проекту.
Flex центрирование по горизонтали
Осуществляется все очень просто. Допустим, у нас есть некий div, который содержит 2 каких-нибудь элемента, которые мы хотим центровать по горизонтальной оси. Для этого нужно будет всего-то использовать CSS-свойство justify-content.
Пример нашего div:
<div class=“boxFlex“>
<p> Первый элемент блока</p>
<p> Второй элемент блока</p>
</div>
Пример нашего CSS:
.boxFlex {
display: flex;
justify-content: center;
}
Далее могут идти другие CSS-свойства.
Помимо центрирования, justify-content может приобретать следующие значения:
flex-start — все элементы располагаются в начале flexbox, это значение по умолчанию;
flex-end — элементы располагаются в конце flexbox;
space-between — элементы располагаются в одной линии с равными промежутками между собой, но без промежутков в начале и в конце контейнера;
space-around — элементы располагаются с промежутками между собой, а также с промежутками в начале и в конце контейнера;
initial — придает элементам значения по умолчанию;
inherit — придает элементам значение родительского элемента.
Flex центрирование по вертикали
За центрирование по вертикали отвечает CSS-свойство align-items. Допустим, мы к нашим описанным выше блокам еще хотим применить flex центрирование по вертикали. Тогда у нас получится следующий CSS-код:
.boxFlex {
display: flex;
justify-content: center;
align-items: center;
}
Помимо центрирования, CSS свойство align-items может приобретать значения: flex-start, flex-end, initial, inherit, как и при горизонтальном выравнивании, только ориентируясь на вертикальное выравнивание, а также несколько собственных значений:
stretch — это значение по умолчанию, когда элементы расположены по всему размеру flexbox; кстати, это значение используют, когда нужно при помощи CSS, используя flex, растянуть элемент по высоте контейнера;
baseline — элементы располагаются в базовой линии flexbox.
Заключение
Flexbox — довольно простая технология со множеством различных настроек элементов контейнера. Мы показали лишь flex центрирование элементов по вертикали и горизонтали. А также то, что, используя CSS-свойство align-items: stretch, можно растянуть элемент по высоте контейнера. Но это лишь капля в море того, на что способна технология flexbox. Потому что она способна создать по-настоящему адаптивную верстку вашей HTML-страницы.
Web