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