Прокладываем дорогу к гибкому будущему веб-дизайна с помощью Flexbox

От автора: обтекание CSS и clear фиксы на сегодняшний день задают основной тон в веб-дизайне. Основанные на принципах вековой давности, они довольно хорошо справляются со своей работой — строго говоря, даже если обтекание предназначалось изначально совершенно для других целей. Также как и таблицы, но это не остановило нас в 1990-ых.

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

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

Мышление Flexbox

Flexbox заставляет мыслить иначе. Если обычно мы расставляем элементы слева направо и рядами/колонками сверху вниз, то в этом случае мы выставляем блоки в линию – а по факту в две, основная ось и ее пересекающая. О первой мы сегодня с вами поговорим. Представьте, что основная ось это веревка, вдоль которой натянуты «коробки» (DIV’ы или другие HTML элементы). Вымышленная веревка тянется от одного конца контейнера к другому, туго натянутая и невидимая. Эти размышления наводят на 4 интересных концепции.

Выравнивание

Первое, что приходит в голову, мы можем расположить наши «коробки» все у левого или правого края, по центру или распределить их равномерно по всей ширине. Значит, объекты могут прилипать как к левой, так и правой сторонам макета – левому или правому краю экрана, ширина экрана не имеет значения. Даже распределяясь по всей ширине, значит, что блоки адаптируются под любой размер экрана, идеальный размер в нашем мультиэкранном мире.

Flexbox позволяет дизайнерам сдвигать элементы к любому краю нашей «веревки»

Направление

Также мы можем развернуть нашу строку так, что блоки будут двигаться в противоположном направлении, и для этого нам не надо редактировать HTML. Очень похоже на метод порядка сортировки. Этот метод помогает развернуть колонки — кроме третьей, которая остается на месте.

Можно перевернуть как порядок, так и позицию элемента

Ориентация

В-третьих, мы можем повернуть веревку на 90 градусов. Теперь веревка тянется не от края до края, а сверху вниз. С помощью возможностей Flexbox и медиа запросов можно заставить, скажем, отображаться шапку, блок статей и футер сверху вниз на смартфонах и слева направо на настольных компьютерах. Немного CSS и то, что раньше называлось рядами, теперь может располагаться как сверху вниз, так и снизу вверх.

Вся верстка может быть повернута на 90 градусов, «свисая» с потолка контейнера

Порядок сортировки

И наконец, мы контролируем то, какой элемент будет занимать первое, второе, третье или даже четвертое положение на веревке, и не нужно редактировать HTML. Это сильно. Это значит, что мы можем структурировать HTML документ на SEO, на предмет доступности или просто семантически — зависит от шаблона. Захотелось вертикально центрировать элементы? Не проблема. Хотите перенести меню из футера вверх? Без проблем. Хотите поэкспериментировать с разными макетами? Все зависит только от CSS. И вот мы уже думаем в терминах контента и устройств, а не в терминах жесткой сетки.

Порядок элементов можно изменить с помощью CSS – HTML трогать не нужно

На самом деле есть еще много чего рассмотреть, но это база. Вспомним:

Порядок

Порядок занимает важное место в Flexbox. Возьмем базовый HTML документ: Типичный пост из блога содержит определенную информацию.

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

А для настольных ПК список будет выглядеть так.

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

Вложенные нити и блоки

Каждый Flexbox шаблон – каждый блок – может содержать внутри себя другой набор блоков с нитями. Эти нити могут пролегать слева направо и наоборот, сверху вниз и наоборот, а также блоки могут располагаться как по левому, так и по правому краю, по центру или по ширине. Так как такая гибкость дает нам большой простор, необходимо осторожно проектировать наш макет.

Элементы вдоль оси также могут содержать свои flexbox оси и элементы

Давайте разберем пример, чтобы понять, почему это немного сложнее; порядок не обязательно обычный (т.е. в том, в котором люди видят его). Представьте, что вы рассказываете презентацию. Сначала вы даете вступление, потом рассказываете основную часть и делаете вывод. Наша вымышленная страница имеет такую же структуру:

Рисуем дизайн

Для простоты будем работать с похожим макетом.

Типичное расположение элементов на почтовом сайте

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

Шапка и футер растянуты на всю ширину области просмотра. Меню помещается в небольшой колонке слева, в области просмотра основного контента появляется полоса прокрутки, если весь контент не влезает в нее. Можно сделать то же самое и с помощью обтеканий и фиксированного позиционирования, но flexbox дает нам большую свободу действий с меньшей разметкой. Посмотрим поближе.

Размечаем документ

Во внешнем контейнере всего три секции, обернутых блоком .flex-container:

Блок-обертку мы назвали flex-container чтобы семантически описать его назначение. По крайней мере в нашем CSS будет какой-то смысл. Внутри блока main нам необходимо разместить три блока:

В примере article используется, как независимый элемент, не в его значении.

Повесим на эти элементы Flexbox

Необходимо сказать браузеру, что это гибкие элементы.

Обратите внимание на то, что этот код применяет Flexbox к основным контейнерам, не к контенту.

Добавим немного размеров

Основываясь на размерах нашего рисунка, мы знаем точные размеры элементов. Шапка и футер body, к примеру, будут длинные, тонкие полосы по сравнению с высотой блока main и относительно левых панелей навигации. Область внутри блока article занимает оставшееся пространство. Чтобы наш макет оставался гибким (для наглядности в этом уроке), эти области не будут иметь фиксированной ширины.

flex-basis работает как ширина – длинный настолько, насколько простирается горизонтальная ось. Если перевернуть ось на 90 градусов, flex-basis становится высотой. Удобно!

Добавляем прокрутку к основной секции

Это уже полегче. Просто добавим overflow: scroll к блоку main, чтобы он не залезал на шапку и футер. Подсказка: можно использовать overflow: auto чтобы прятать полосу прокрутки в большинстве браузеров, когда она не нужна.

Тестируем контент

На данный момент форма шапки должна иметь небольшой внешний отступ, даже при изменении окна браузера. Контент должен хорошо отображаться в окнах любого размера. А если браузер не поддерживает Flexbox, то страница вернется к шаблону content-first.

Это очень важно, ведь вы знаете, кто у нас все еще не поддерживает Flexbox. Каждый современный браузер поддерживает flexbox, но вопрос в том, когда же пользователи обновят свое ПО. Где же поддерживается flexbox?

На сайте Clicky есть график долей рынка мобильных браузеров. А что насчет старых браузеров? Способы решения разные, все зависит от сложности макета. И все же можно дать пять советов.

Самый безопасный способ поддерживать неподдерживаемые браузеры это писать CSS в порядке мышления. Начните думать семантически. Старые версии IE игнорируют свойства flexbox – к счастью, старые добрые условные комментарии помогут применить обтекание и clear фиксы. Для старых версий других браузеров есть макеты мобильных версий, в которых контент располагается вертикально в логическом порядке. Так что flexbox может сосуществовать с обтеканиями, display: table-cell и позиционированием. Умные браузеры будут использовать flexbox свойства, в то время как старые будут их игнорировать. И, в конце концов, если решили поэкспериментировать, попробуйте Flexie. Данный полифил использует JavaScrip, чтобы старые браузеры поддерживали свойства flexbox.

Дайте шанс Flexbox. Так как он предлагает множество опций, большинство из которых – как выравнивание – пригодятся вам, как только вы поймете, как они влияют на расположение элементов. Базовые методы, изученные в данной статье: выравнивание, направление, ориентация, порядок сортировки и вложенность. Если вы можете за раз усвоить информацию по выравниванию, направлению, ориентации и порядку сортировки, то у вас открыты все дороги на пути к гибкому будущему. Посмотрите мое демо, чтобы понять, как все работает (помните, что пример неадаптивный).

Автор: Ben Gremillion

Источник: //www.smashingmagazine.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: