Web

Контейнеры Flex: центрирование по вертикали и растягивание размеров

Lorem ipsum dolor

Контейнеры 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

Как управлять браузером без мышки: список горячих клавиш и команд

Web

Как получить значения из выпадающего меню с помощью PHP

Web

Возврат JSON из PHP-скрипта

Как и на чём лучше писать сайты?
Web

Как и на чём лучше писать сайты?