Flexbox вёрстка с примерами применения

Flexbox – это стандарт CSS, предоставляющий различные инструменты для проектирования интерфейсов web-страниц. Флексбокс используется для создания блочных страниц, на которых элементы можно без проблем выравнивать как по горизонтали, так и по вертикали. Flexbox также позволяет изменять порядок отображения блоков. Они могут быть растянуты на всю высоту родительского элемента или, наоборот, «прибиты» к низу. Таким образом, применение этой технологии позволяет создавать адаптивные веб-приложения и сайты, которые будут подстраиваться под дисплеи различных размеров.

В этой статье будут рассмотрены 5 приемов, которые позволяют решить проблемы CSS-компоновки. Также будут рассмотрены практические примеры использования этих приемов.

Создание столбцов с одинаковой высотой

Опытные верстальщики прекрасно знают, что данная задача не такая легкая, как кажется на первый взгляд. Это обусловлено тем, что min-height, задающий минимальную высоту элемента, зачастую не работает из-за появления нового контента, который изменяет размер столбцов.

Flexbox является неидеальным вариантом решения этой проблемы, так этот инструмент задает всем столбцам равную длину. Для устранения этого недостатка нужно ввести «подвижную» модель и проверить правильность значений align-items и flex-direction.

<div class="container">
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

.container {
    display: flex; 
    flex-direction: row;
    align-items: stretch;
}

Перестановка элементов

Некогда в прошлом динамическое изменение порядка некоторых элементов являлось задачей, посильной только 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;
}

Горизонтальное и вертикальное центрирование

Выравнивание в 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. Удачи!

Теги:

Flexbox вёрстка — примеры и особенности