flex — это одна из великолепных возможностей новых версий CSS. Используя один только flex можно очень простым кодом (заданием стилей) настроить внешний вид сайта в зависимости от размера экрана, на котором происходит просмотр. Можно изменять порядок, пропорции, делать невидимыми блоки веб-сайта. И всё это без использования JavaScript или сложных конструкций CSS стилей.

По flex уже сейчас много достаточно полной документации, в том числе на русском языке. Но читая длинные справочные статьи не всем просто понять мощь и возможности, которые приносит flex. В этой заметке представлен простой пример реализации flex для создания адаптивного дизайна. Главная задача — показать возможности flex, подтолкнуть вас к собственным экспериментам и использованию flex.

Чтобы было понятно, чего мы хотим добиться, посмотрите это короткое видео. В нём я меняю размер браузера (эмулирую просмотр сайта на разных экранах) и можно видеть, как прямо на лету элементы страницы меняют свой размер, свой порядок следования, исчезают или появляются, перемещаются в другие части страницы и т. д.:

Итак, приступим.

Сразу уточную — из приведённого кода убраны стили, отвечающие за внешний вид, не связанный с адаптивностью. Это сделано для упрощения восприятия действительно важных участков кода. Полный пример кода вы можете скачать по этой ссылке.

Мы создали html файл со структурой:

Главное содержимое страницы — класс main-content — то, что ниже шапки. Мы подключаем flex-контекст для всех его непосредственных потомков:

Редактируем первый (левый) блок. Мы задаём его ширину в 20% — flex: 2;. На самом деле, ширина определяется как 2/10. 2 — это установленное нами значение. А 10 — сумма значений всех блоков. Нумерацию порядка элементов (order: 0;) можно начинать с нуля.

Аналогично задаём параметры для среднего (главного) блока. Только устанавливаем ширину 60% и другой порядковый номер:

Последний, третий элемент:

На этом этапе у нас получился вот такой макет:

01

При изменении размеров экрана, элементы будут изменять свой размер в заданных пропорциях.

Имитация планшета:

02

Имитация мобильного телефона:

03

Внешний вид, особенно на мобильный устройствах, неудовлетворительный. Поэтому продолжаем.

Дизайн для средних экранов вроде планшетов

Все нижеследующие стили помещаются в конструкцию:

Т.е. они начинают применяться, когда экран меньше чем 1024px, но больше чем 768px:

Теперь, при изменении размеров экрана, раздел с виджетами будет убираться с экрана, а основной раздел (который был в центре), станет занимать чуть больше места:

04

Тем не менее, даже с учётом убранного раздела с виджетами, вид на мобильных устройствах не очень:

05

Устанавливаем дизайн для небольших экранов вроде телефонов

Все последующие стили находятся в секции

Обратите внимание на опцию стиля flex-direction: column;. Теперь в главном контейнере сайта (.main-content — всё то, что ниже шапки), элементы будут размещаться не столбиками, а полосками.

Ещё мы вернули раздел с виджетами, но перенесли его ниже главного контейнера (.news), который теперь стал первым.

Т.е. при открытии сайта на мобильном устройстве, пользователь увидит не навигацию или какую-то второстепенную информацию, он уведет основной контент. При необходимости, он сможет пролистать вниз до навигации. Причём, основной контент теперь занимает 100% ширины небольшого экрана мобильного устройства (поскольку теперь каждый контейнер внутри класса main-content размещён «полосками»):

Стало лучше, но ещё хотелось бы позаботиться о логотипе и о ссылка в шапке.

06

Логотип мы переместим в центр на самую высокую линию. А ссылки в шапке мы также выстроим в линии, причём, зададим им фоновый цвет — чтобы они не сливались с основным контентом:

Теперь мобильный вид у нас выглядит так:

07

Заключение

У flex ещё много чего интересного, много опций и стилей. Я показал только самую базовую реализацию. Рекомендую также прочитать дополнительную справочную информацию.

Для тех, кто пропустил, исходный код примера, который показан в этой статье, вы найдёте по ссылке.