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

Прокладываем дорогу к гибкому будущему веб-дизайна с помощью 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 трогать не нужно

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

Блоки висят вдоль невидимой линии.

Мы можем толкать их туда-сюда вдоль линии.

Мы можем развернуть линию, тем самым развернув порядок блоков.

Линию можно повернуть на 90 градусов.

В независимости от разметки мы можем перемешивать элементы вдоль линии в любом порядке.

Порядок

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

Заголовки. Название сайта, описание, форма поиска (Они предназначены, чтобы дать пользователю представление о том, куда он попал)

Мета данные. Автор/издатель, дата, тема(ы) (Это помогает понять пользователям, подходит ли контент их запросам)

Основной контент. Собственно, о чем страница (Причина существования страницы)

Меню. Ссылки на другие разделы сайта (Разделы верхнего уровня)

Футер. Копирайты, RSS, социал медиа, подписка на новостную рассылку

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

Основной контент

Мета данные

Дополнительный контент

Заголовки

Меню

Футер

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

Заголовки

Мета данные

Основной контент

Дополнительный контент

Меню

Футер

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

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

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

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

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

Заголовки

Основное сообщение

Список сообщений

Ссылки на входящие сообщения, архивы

Футер

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

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

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

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

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

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

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

  <div class="flex-container">
    <header>...</header>
    <main class="flex-container">...</main>
    <footer>...</footer>
  </div>
</body>

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

<main class="flex-container content">
  <article class="message">...</article>
  <div class="message-list">...</div>
  <nav class="mailbox-list">...</nav>
</main>

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

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

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

.flex-container,
.flex-container header,
.flex-container footer {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

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

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

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

.message {
  flex-basis: 70%;
}
.message-list {
  flex-basis: 15%;
}
.mailbox-list {
  flex-basis: 15%;
}
.flex-container header,
.flex-container footer {
  width: 100%;
  height: 5rem;
}

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

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

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

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

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

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

Chrome 31и выше

Firefox 31и выше

Internet Explorer 10 и выше

Safari для Mac версия 7 и выше

Safari для iOS 7.1 и выше

Android браузер 4.4 и выше

Chrome для Android 4.2 и выше

Opera 27 и выше

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

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

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

Автор: Ben Gremillion

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

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

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree