Контейнеры 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. Допустим, мы к
нашим описанным выше блокам, еще хотим применить центрирование по
вертикали. Тогда у нас получится следующий 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-странице.
