Flexbox: общая информация

Мы начинаем новый большой верстачный (верстальный? верстковый?) раздел, посвященный современному инструменту, которым активно пользуются верстальщики и фронтенд разработчики - Flexbox ("гибкая коробка" - шучу, никогда не переводите это слово, просто флексбокс).

Разбор Flexbox будет основательный, потому что, овладев навыком верстки на флексбоксах, вы становитесь востребованным человеком на рынке труда. Поверьте, в мире веба маловато действительно мощных верстальщиков, даже я иногда поттупливаю в этом деле (но мне можнаааа, я же еще и программист, с фреймворками всякими ковыряюсь, сборщики подключаю, транспиляторы настраиваю, чем бы еще себя оправдать...). Поэтому, flexbox будем учить до посинения, может, и я, наконец-то, стану гуру этого инструмента.

И начнем мы, как обычно, с погружения в контекст.

Немного истории

CSS Flexible Box Layout, более известный, как Flexbox - это особенный путь в развитии верстки макетов, возникший вследствие попыток умных людей избавить разработчиков и верстальщиков от хаков и неоптимальных решений, которые приходилось применять при блочной и табличной верстке в случае сложных и дико сложных макетов.

Я часто повторяю, что мир несется вперед бешеными темпами, не давая расслабить булки ни одному техническому специалисту, особенно в мире веба. Каждый месяц появляются какие-то новые крутые штуки, заставляющие нас снова учиться новому и пополнять багаж опыта новыми челенджами.

В прошлом (хотел сказать веке, но 10 - 15 лет назад - это тоже XXI век, XX - это 20 и более лет назад, можете себе представить? Я нет, где мой крем от морщин, по-моему, мне спину прихватило) десятилетии веб-программисты и верстальщики вообще не парились во время создания макетов сайта: у всех людей были настольные компьютеры и ноутбуки, никаких смартфонов, планшетов, смарт телевизоров, моноблоков (по крайней мере, в массовом потреблении). Поэтому можно было верстать макеты с фиксированным размером, центрируя его на экране (отчего были здоровые и убогие белые полосы по краям экрана), либо делать резиновый макет с помощью таблиц. Можно было упарываться только программированием и класть болт на фронтенд (да даже понятия такого в те времена не было).

Однако, счастье длилось недолго. Начиная с легендарной презентации первого iPhone, мир вступил в эру смартфонов. Они быстро распространялись по всему Земному шару, привнося необратимые изменения в привычный уклад жизни людей. В том числе веб-разработчиков. Ведь с массовым распространением смартфонов вкупе с ростом скорости мобильного Интернета и повсеместной установки WiFi точек возникла необходимость адаптировать макеты сайтов под маленькие экраны (здоровых лопат, которыми можно убить человека, еще не было, хотя и для них адаптировать позже пришлось). Не забываем, что в это же время планшеты вдогонку за смартфонами требовали к себе внимания. Короче, жизнь для разработчиков перестала быть сказкой - нужно было делать адаптивный макет под все экраны разных устройств.

Медиа запросы, Bootstrap, viewport

Конечно, адаптивный дизайн можно было делать разными способами. Согласно спецификациям W3C, первая версия Flexbox датируется 2009 годом. Однако, эти версии получались кривыми, и их постоянно приходилось дорабатывать (посмотрите, сколько версий за все время было опубликовано). Параллельно медленно развивающимся Flexbox (не факт, что их вообще серьезно кто-то воспринимал тогда), активно захватывали мир адаптивности медиа запросы - специальная конструкция в CSS, которая позволяет писать стили для разных размеров экранов устройств. Выглядит это так:

@media условие { CSS стили }

При изменении окна браузера (или открытии сайта на разных устройствах) эти запросы выполняются согласно заданному условию. Например, медиа запрос

@media screen and (min-width 1200px) { CSS стили }

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

Почему важно узнать о медиа запросах в рамках статьи о Flexbox? Во-первых, в современном мире они охренительно сочетаются, и мы обязательно эти сочетания будем изучать. Во-вторых, медиа запросы стали основой для появления, можно сказать, легендарного инструмента от компании Twitter под названием Bootstrap. Именно ребята с Twitter дали огромный толчок в развитии адаптивной верстки, и по сей день этим инструментом активно пользуются, когда не хотят заморачиваться с написанием своих сложных медиа запросов и других вещей, в том числе, Flexbox.

Я решил, что мы сначала погрузимся чисто во Flexbox, потом плавно перейдем в медиа запросы, и в конце соединим это все в единое целое.

В завершение этого раздела упомяну один интересный способ сделать макет сайта нормально выглядящим на экранах смартфонов без всяких медиа запросов и Flexbox. Имя этому способу - "мета-тег viewport".

Мобильные браузеры отображают страницы в виртуальном «окне» (viewport, вьюпорт), которое, как правило, шире экрана устройства. Поэтому им не нужно сжимать макет каждой страницы в крошечное окно (что может сломать многие сайты, не оптимизированные под мобильные устройства). Пользователи могут изменять и масштабировать видимую область, чтобы видеть разные части страницы. В большинстве случаев этот тег выглядит так (напомню, что мета-теги пишутся внутри заголовочной секции - <head></head>):

<meta name="viewport" content="width=device-width, initial-scale=1">

Первый параметр "width" дает команду браузеру адаптировать по ширине страницу к устройству, на котором она открыта. Масштабирование ширины страницы определяется автоматически, если указано значение "device-width" (как в примере выше). Также можно установить числовое значение от 200 до 10000 пикселей. Второй параметр "initial-scale" означает коэффициент масштабирования. Если указано значение «1», разрешение CSS и устройства приравниваются друг к другу независимо от размера экрана. Можно указать любое значение параметра от 0.1 до 10.

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

Flexbox

Вернемся к нашим гибким баранам. Flexbox в первую очередь отвечают за гибкость макета. Одной из наиболее определяющих особенностей гибкого макета является его способность подгонки формы в зависимости от среды просмотра. Flexbox могут регулироваться по размеру - либо уменьшаться, чтобы избежать ненужной монополизации пространства, либо увеличиваться, чтобы освободить место для содержимого, которое будет ограничено в пределах его границ. Кроме того, гибкая компоновка менее ограничена с точки зрения потока контента (того самого, из которого можно вытаскивать плавающие элементы и элементы с не статичным позиционированием), чем, например, типы блочного и встроенного (строчного) отображения, которые обычно являются однонаправленными. В действительности, можно указывать направление потока не только на уровне стилей (вправо, влево, вверх или вниз) - отдельные элементы в гибком контейнере также могут быть автоматически переупорядочены и переставлены в соответствии с доступным пространством макета.

Идея состоит в том, чтобы не насиловать поток документа всякими float и position: absolute, а помещать элементы в нем равномерно, причем эта равномерность будет сохраняться при изменении размеров отображаемой страницы. Для этого Flexbox предоставляют множество стилей, понимание которых всегда дается тяжело, потому что сама концепция трудно воспринимаемая. Но её освоение позволяет стать мощным верстальщиком с высокой зарплатой, потому что один верстальщик, который способен адаптировать макет сайта под любые устройства без косяков и хаков в наше время на вес золота (ну и фронтендеры, разумеется).

Если говорить коротко о Flexbox (чего я, похоже, не умею делать, но постараюсь ужаться), получим следующее:

1. Flexbox состоят из двух компонентов: контейнер и его содержимое.
2. Содержимое контейнера может располагаться в любом направлении потока (влево, вправо, вверх, вниз).
3. Порядок отображения содержимого может быть изменен или переставлен на уровне стилей.
4. Содержимое может быть расположено линейно вдоль одной (главной) оси или обернуто в несколько линий вдоль вторичной (поперечной) оси.
5. Содержимое может «согнуть» свои размеры, чтобы соответствовать доступному пространству.
6. Элементы контейнера могут быть выровнены относительно их контейнера или друг друга на вторичной (поперечной) оси.
7. Содержимое может динамически сворачиваться или разворачиваться вдоль главной оси при сохранении размера контейнера.

Думаю, погружаться в детали стоит постепенно. На этом краткое знакомство с Flexbox предлагаю закончить, чтобы в дальнейших статьях подробнее разбирать все тонкости и нюансы этого замечательного инструмента.

Итого

Мы положили начало большому пути под названием "боль и отчаяние при познании Flexbox", который закончится нереальным кайфом, когда вы освоите этот удивительный инструмент. До кучи, Flexbox можно спарить с медиа запросами - тогда вообще будет отвал башки. Самое главное в этом деле - терпение. Учитывая, что вы продолжаете читать эти статьи, несмотря на их размеры (спасибо вам за это, для меня это важно), терпения у вас предостаточно, значит, вы по-любому освоите этот инструмент.

В следующей статье рассмотрим, какие именно стили отвечают за работу с Flexbox, как именно можно размещать элементы внутри контейнера и в чем, собственно, сложность данного способа верстки. Всем бобра!