Долгое время мы были вынуждены строить интерфейс наших веб-приложений, используя режим компоновки CSS, который изначально задуман просто для размещения документов на странице. Это и было основной сложностью, с которой сталкивались новички. Благо всё изменилось с появлением режима flexbox.
Конечно, есть некоторые ограничения в виде IE < 10 (давно устаревшие браузеры), которые не являются препятствием, так что данная технология является сегодня актуальной! Для большинства современных браузеров требования были унифицированы, что означает возможность использования без каких-либо изменений со всеми ними.
В этом небольшом руководстве я покажу вам, как с помощью flexbox можно упростить выполнение некоторых базовых задач, а точнее выравнивание по высоте CSS и создание боковых панелей с контентом на базе этого приёма. Сложность данной операции заключается в том, что вам надо создать боковую и главную панели равной высоты, но с разным количеством контента, но всё становится гораздо понятнее и проще с приходом flexbox.
А теперь ближе к делу!
Первое знакомство с flexbox
Есть куча гайдов, которые дадут вам более глубокие знания об этой технологии. В данной же статье мы не будем долго вникать в теорию, а сразу перейдём к практике. Самое главное среди всего этого-HTML:
<section id="page">
<div id="main">
<!-- Основной контент будет находиться здесь -->
</div>
<aside>
<!-- Тут у нас будет боковая панель (сайтбар) -->
</aside>
</section>
Нам надо, чтобы #main div и aside находились рядом друг с другом и были одинаковой высоты независимо от содержания, а также мы хотим, чтобы дизайн страницы являлся адаптивным, но при этом боковая панель могла менять только длину, а основной только ширину, заполняя всё свободное пространство. На небольших же дисплеях мы хотим видеть боковую панель (сайтбар) уже под блоком с основным контентом.
Для начала следует «включить» flexbox:
#page {
display:flex;
}
Данная операция сделает из элемента #page flex-контейнер. Подобный ход позволит нам превратить всё, что будет находиться внутри этого блока в «гибкие» элементы. Это очень важно если мы хотим сделать наш основной блок и боковой эластичными, занимающими всю длину страницу.
Но нам также хочется, чтобы элемент #page имел максимальную ширину в 1200px и был центрирован. Это всё ещё блок, а значит вышеперечисленное можно прописать следующим образом:
#page {
display:flex;
/* Центрируем */
max-width:1200px;
margin:0 auto;
}
Замечательно! Следом зададим ширину для главной и боковой колонок:
#main {
/* Это заставит элемент расти и занимать всё свободное пространство корме «боковушки» */
flex-grow:1;
}
aside {
/* Задаём боковой панели изначальную ширину, убираем возможность расширения */
flex-shrink:0;
width:280px;
}
Отлично, макет почти закончен. Когда контент внутри элемента #main приведёт к изменению его размера, тот в свою очередь начнёт изменять размер #page. Остался лишь финальный штрих – смещение боковой вниз на небольших экранах. Это легко реализовать, применив медиа-запрос:
@media all and (max-width: 800px) {
#page {
flex-flow:column;
}
/* Делаем так, чтобы боковая панель занимала всю ширину экрана, находясь под блоком с основным контентом */
aside {
width:auto;
}
}
В основном «гибкие» контейнеры имею значения flex-flow для строк, что позволяет отображать элементы бок о бок. При уменьшении устройства отображения страница приобретает вертикальную ориентацию.
Я не стал упоминать другие свойства CSS, которые не относились к данному макету, а являлись скорее общими. Если хотите, то можете скачать весь код, нажав на кнопку в нижней части страницы. Стоит ещё сказать, что я не показал реализацию этой задачи для IE10, который использует старые версии flexbox, поэтому выравнивание по высоте CSS будет работать только с Firefox, Chrome, Safari, Opera и IE 11.
Наконец наша боковая панель готова!
Вывод
Эта статья является только вводной. Существует ещё целая куча материалов о разных приёмах с flexbox. Тем не менее данная технология является далеко не единственной технологией для реализации проектов в подобной сфере. Единственное условие для использования – это отказ от поддержки старых версий IE.