Flexbox - относительно новый инструмент в мире CSS, и мы продолжаем находить для него все более интересные места для использования. Первостепенная задача этого дополнения - упростить расположение элементов и выровнять их в CSS по центру экрана, а также отделить друг от друга динамические блоки, размер которых не известен (отсюда и название «flex» - «гибкий»).
С этой технологией мы можем легко и просто решить извечную проблему с выравниванием элемента как по вертикали, так и по горизонтали. Это проще, чем вы можете себе представить - это всего три строки кода, не требуется указывать размер центрированного элемента, а также сама технология проста в использовании.
Этот способ работает во всех современных браузерах - IE10 +, Chrome, Firefox и Safari (с -webkit-префиксом). Полную таблицу совместимости смотрите здесь.
HTML верстка
Идея, конечно, полностью заключается в использовании flexbox. Мы изначально создаем контейнер, в котором мы хотим, чтобы все элементы CSS были расположены по центру:
<div class="container">
<!-- Любой контент здесь будет центрирован -->
<img src="fireworks.jpg" alt="fireworks">
</div>
Вы можете разместить этот контейнер div в любом месте. В приведенном выше примере мы сделали это, взяв всю ширину и высоту страницы.
CSS стили
Как и говорилось ранее, мы будем использовать только три строки кода. Вот они:
.container {
display: flex;
justify-content: center;
align-items: center;
}
Каждый «гибкий» контейнер имеет две оси для позиционирования элементов. Основная ось выражается свойством flex-direction (может быть row или column). Опустив это правило, мы оставили flex-direction по умолчанию - row.
Теперь все, что нам нужно сделать, - это центрировать обе оси. Сделать это очень просто:
- Преобразуйте тип отображения в flex, чтобы активировать режим flexbox;
- justify-content определяет, где элементы гибкости будут выровняться в соответствии с основной осью (горизонтально в нашем случае);
- align-items делает то же самое с осью, перпендикулярной основной (вертикально в нашем случае).
Теперь, когда мы указали правила вертикального и горизонтального выравнивания элементов CSS по центру, любой элемент, который мы добавляем внутри контейнера, будет располагаться идеально посередине. Нам не нужно заранее знать его размеры, браузер сам сделает всю нужную работу!
Резюмируем
Существует множество других методов для центрирования контента с помощью CSS, но flexbox делает это намного проще и красивее. Если вы хотите узнать больше об этом, ознакомьтесь с этими ресурсами:
1. Полное руководство по Flexbox – здесь;
2. MDN: Использование гибких блоков CSS – здесь.