В этой статье мы рассмотрим, как c помощью flexbox решить основные проблемы CSS, которые возникают при верстке макета, без боли.
Flexbox – стандарт CSS, созданный для оптимизации процесса создания пользовательских интерфейсов. Используя свойства flexbox-ов, можно создавать страницы, будто складывая блоки, которые легко позиционируются и ресайзятся так, как нам нужно. Сайты и приложения, созданные с использованием flexbox, по умолчанию адаптивны и хорошо смотрятся на любом экране.
1. Создание колонок одинаковой высоты
На первый взгляд не кажется сложным, но на деле сверстать колонки таким образом может стать не очень приятной задачей. Просто установить min-height нельзя, так как при увеличении объема контента в одной из них ее высота вырастет, а остальные останутся короткими.
Если использовать flexbox, то решение будет довольно простым. Все, что нужно, – инициировать flex и убедиться, что в свойствах flex-direction и align-items установлены значения по умолчанию.
CSS
.container {
/* Инициализируем flex */
display: flex;
/* Это значения по умолчанию, но их все равно можно установить */
flex-direction: row; /* Элементы внутри контейнера будут позиционироваться горизонтально */
align-items: stretch; /* Элементы внутри контейнера будут занимать всю его высоту */
}
HTML
<div class="container"> <!-- Одинаковые по высоте колонки --> <div>...</div> <div>...</div> <div>...</div> </div>
2.Изменение порядка элементов
Еще недавно, чтобы поменять порядок элементов на странице, необходимо было прибегать к помощи JavaScript. С использованием flexbox все, что для этого потребуется, – изменить одно свойство.
Называется оно order и позволяет менять местами любое количество flex-элементов и изменять последовательность, с которой они располагаются на экране. Единственный параметр целым числом определяет позицию элемента: чем ниже номер, тем выше приоритет.
CSS
.container {
display: flex;
}
/* Меняем порядок элементов */
.blue {
order: 3;
}
.red {
order: 2;
}
.green {
order: 1;
}
HTML
<div class="container"> <!-- Элементы будут выстроены в обратном порядке --> <div class="blue">...</div> <div class="red">...</div> <div class="green">...</div> </div>
3. Горизонтальное и вертикальное выравнивание
Вертикальное выравнивание в CSS – одна из тех проблем, которые заставляют негодовать: как такая тривиальная вещь может так сложно реализовываться? Если вам когда-либо приходилось гуглить, как выровнять блок по вертикали, вы наверняка видели целую кучу различных техник, но ни одна из них явно не спроектирована для создания красивых макетов.
Flexbox предоставляет простое решение этой проблемы. Flex-разметка имеет две оси – X и Y, а также два свойства для выравнивания по каждой из них. Используя их, мы можем выровнять любой элемент строго по центру родительского контейнера.
CSS
.container {
display: flex;
/* Центр по главной оси */
justify-content: center;
/* Центр по вторичной оси */
align-items: center;
}
HTML
<div class="container"> <!-- Любой внутренний элемент будет расположен по центру по двум осям --> <div>...</div> </div>
4. Создание полностью отзывчивой сетки
Многие полагаются на различные CSS фреймворки вроде Twitter Bootstrap, когда необходима динамичная отзывчивая сетка. Подобные бутстрапу фреймворки хорошо работают и обладают множеством опций, но у них общий недостаток: они слишком тяжелые. Особенно если нужна только сетка.
Таким образом, если вы все любите делать сами, или вам просто не нужен лишний вес и функционал, можно воспользоваться flexbox.
Ряд в сетке на flexbox – это контейнер со свойством display: flex. Внутри может располагаться любое количество вертикальных колонок, размер которых устанавливается через свойство flex. Flex-модель адаптирует размеры колонок под любой экран, а если окажется, что места для колонок на экране недостаточно, то можно переделать модель в полностью вертикальную с помощью media-query.
CSS
.container {
display: flex;
}
/* Классы для каждого размера колонок. */
.col-1 {
flex: 1;
}
.col-2 {
flex: 2;
}
@media(max-width: 800px) {
.container {
/* Делаем макет вертикальным */
flex-direction: column;
}
}
HTML
<div class="container"> <!-- Эта колонка будет шириной 25% --> <div class="col-1">...</div> <!-- Эта колонка будет шириной 50% --> <div class="col-2">...</div> <!-- Эта колонка будет шириной 25% --> <div class="col-1">...</div> </div>
5. Создаем идеально позиционированный футер
Когда стоит задача создать футер, который всегда будет привязан к низу страницы, независимо от количества и вообще присутствия прочего контента, поможет flexbox.
display: flex, примененный к тегу body, позволяет строить макет всего содержимого страницы с использованием flex-свойств. Так что, будь то футер или топ страницы, их будет легко позиционировать так, как нам нужно.
CSS
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
height: 100%;
}
/* Главная секция заполнит все свободное место на странице, которое не занял футер */
.main {
flex: 1 0 auto;
}
/* Футер заполнит столько вертикального пространства, сколько ему будет нужно, ни пикселем больше */
footer {
flex: 0 0 auto;
}
HTML
<body> <!-- Весь контент будет здесь --> <div class="main">...</div> <!-- наш футер --> <footer>...</footer> </body>
Комментарии