От автора: Очень продолжительное время мы были вынуждены создавать интерфейсы для наших веб-приложений, применяя СSS техники, которые изначально задумывались для верстки печатных документов. Неудивительно, что их использование вызывает столько затруднений у новичков! К счастью, времена меняются. Теперь у нас есть модуль Flexbox. Если вы можете позволить себе не заботиться о поддержке в браузерах IE < 10 (а это большое «если»), то вы можете использовать Flexbox уже сегодня! Спецификация является завершенной, и почти все браузеры поддерживают данный модуль без необходимости применения вендорных префиксов.
В этой небольшой обучающей статье я покажу, как использовать flexbox, чтобы создать нечто базовое, что раньше вызывало затруднения. И это нечто называется боковая колонка (sidebar), который при этом имеет одинаковую высоту с вашим основным контентом. Основная трудность заключается в том, чтобы объем содержимого в основном блоке и боковой колонке мог меняться, но при этом данные блоки оставались бы одинаковой высоты. С flexbox это очень легко сделать. Вот как это делается.
Скажите «Привет, Flexbox»
В Интернете можно найти множество руководств, в которых рассматривается flexbox. В этой статье мы подойдем к рассмотрению flexbox с практической точки зрения, т.е. сразу же перейдем к его использованию. Сначала создадим HTML разметку:
|
1 2 3 4 5 6 7 8 9 10 11 |
<section id="page"> <div id="main"> <!-- Здесь расположен контент страницы --> </div> <aside> <!-- Здесь расположена боковая колонка --> </aside> </section> |
Нам нужно, чтобы блоки #main div и aside располагались рядом друг с другом и были одинаковой высоты, независимо от объема содержимого, которое в них находится. Нам также хотелось бы, чтобы страница была отзывчивой, т.е. чтобы у боковой колонки была фиксированная ширина, а основной блок с контентом мог сжиматься/расширяться для заполнения доступного пространства. И, наконец, на устройствах с маленьким экраном боковая колонка должна перемещаться под основной блок с контентом.
Вот, как это можно сделать. Для начала активируем модуль flexbox:
|
1 2 3 |
#page { display:flex; } |
Благодаря этому элемент #page становится flex-контейнером (т.е. «резиновым»). Он будет отображаться, как блочный элемент (т.е. будет растягиваться на всю ширину страницы), а все элементы, являющиеся дочерними по отношению к нему, превратятся в flex-элементы. Это очень важный момент, т.к. нам нужно, чтобы основной блок с контентом и боковая колонка растягивались на всю высоту страницы.
Но мы также зададим максимальную ширину 1200px для элемента #page и отцентрируем его. Поскольку это обычный блочный элемент, то можно написать так:
|
1 2 3 4 5 6 7 |
#page { display:flex; /* Центрирование страницы */ max-width:1200px; margin:0 auto; } |
Превосходно! Теперь нам нужно задать ширину для элемента #main и боковой колонки:
|
1 2 3 4 5 6 7 8 9 10 |
#main { /* Это заставит элемент растягиваться и занять все доступное пространство, незанятое боковой колонкой */ flex-grow:1; } aside { /* Задаем для боковой колонки ширину по умолчанию и предотвращаем ее сжатие */ flex-shrink:0; width:280px; } |
Готово! Мы почти закончили. Когда элемент #main будет растягиваться за счет увеличения контента, он будет растягивать и элемент #page, из-за чего впоследствии растянется и элемент aside (и наоборот). Последнее, что нам осталось сделать, это расположить боковую колонку под основным блоком с контентом на устройствах с маленьким экраном. Для этого нам потребуется простой медиа-запрос:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@media all and (max-width: 800px) { #page { flex-flow:column; } /* Заставляет боковую колонку растягиваться на всю ширину экрана */ aside { width:auto; } } |
По умолчанию для flex-контейнеров установлено значение row для свойства flex-flow, которое позволяет расположить элементы рядом друг с другом. На маленьких экранах мы переключаемся на вертикальную ориентацию, что заставляет боковую колонку переместиться под основной блок с контентом.
Для краткости я пропустил часть CSS кода, не влияющую на разметку. Но вы можете посмотреть все стили, скачав исходники к данной статье. Также стоит упомянуть, что я не рассказал про альтернативные варианты для работы с flexbox в IE 10, для которого используется немного устаревшая версия спецификации flexbox, т.е. мой пример будет работать только в браузерах Firefox, Chrome, Safari, Opera и IE 11.
Вот наша боковая колонка и готова!
Заключение
Вам предстоит еще многое узнать о flexbox, но я надеюсь, что эта статья даст вам «быстрый старт». Безусловно, модуль Flexbox не является единственным решением для создания подобной разметки страницы, но это за ним стоит будущее разработки веб-интерфейсов. Если вам не нужна поддержка старых версий IE, то вы можете пользоваться им уже сейчас.
Автор: Martin Angelov
Источник: //tutorialzine.com/
Редакция: Команда webformyself.
Комментарии (5)