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