HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - Фрэйн .

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

Браузерная поддержка Flexbox

Сразу обозначим исключения: Internet Explorer 9, 8 и более ранних версий Flexbox не поддерживает.

Что же касается всех остальных браузеров, чью поддержку хотелось бы получить (и практически всех браузеров мобильных устройств), то у вас есть возможность воспользоваться большинством, если не всеми свойствами Flexbox. Информацию о поддержке можно получить по адресу http://caniuse.com/.

Прежде чем углубиться в изучение Flexbox, нужно сделать небольшое, но важное отступление.

Кому-то все еще нужны префиксы

Я надеюсь, что, посмотрев на примеры Flexbox, вы отдадите должное пользе от его применения и вдохновитесь на его использование. Но вводить вручную весь код, необходимый для поддержки различных Flexbox-спецификаций, — задача не из легких. Вот пример, в котором я собираюсь задать три относящихся к Flexbox свойства и значения. Рассмотрим его код:

.flex {

    display: flex;

    flex: 1;

    justify-content: space-between;

}

Именно так свойства и значения будут выглядеть в самой последней версии синтаксиса. Но если нужно получить поддержку со стороны Android-браузеров (v4 и ниже), а также IE 10, потребуется следующий код:

.flex {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-flex: 1;

    -webkit-flex: 1;

        -ms-flex: 1;

            flex: 1;

    -webkit-box-pack: justify;

    -webkit-justify-content: space-between;

       -ms-flex-pack: justify;

            justify-content: space-between;

}

Необходимость написания всего этого обусловлена тем, что в последние несколько лет во всех браузерах стали доступны экспериментальные версии новых функциональных возможностей, но с использованием так называемого префикса производителя (vendor prefix). У каждого производителя имелся собственный префикс. Например, -ms- для Microsoft, -webkit- для WebKit, -moz- для Mozilla и т. д. Для каждой новой функциональной возможности это означало необходимость написания нескольких версий одного и того же свойства, сначала в форме версий с префиксами, а в конце — в форме официальной версии консорциума W3C.

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

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

Выбор решения для автоматизации расстановки префиксов

Чтобы сберечь нервы и аккуратно, без особых усилий добавить к CSS префиксы производителей, воспользуйтесь решением для автоматической расстановки префиксов. Лично я на данный момент предпочитаю пользоваться средством Autoprefixer (https://github.com/postcss/autoprefixer). Оно работает довольно быстро, легко настраивается и отличается высокой точностью работы.

Существуют версии Autoprefixer для большинства настроек, и вам не обязательно пользоваться средством создания на основе использования командной строки (например, Gulp или Grunt). К примеру, если пользоваться средством Sublime Text, то существует версия, которая будет работать непосредственно из его палитры команд: https://github.com/sindresorhus/sublime-autoprefixer. Есть также версии Autoprefixer для Atom, Brackets и Visual Studio.

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

Разбираемся с возможностью динамического изменения

У Flexbox имеются четыре основные характеристики: направление (direction), выравнивание (alignment), определение порядка (ordering) и динамическое изменение (flexibility). Мы рассмотрим все эти характеристики и их взаимоотношения на нескольких примерах.

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

Текст, безупречно выровненный по вертикали

Этот первый пример использования Flexbox можно найти в файле каталога example_03-03.

Разметка выглядит следующим образом:

<div class="CenterMe">

    Hello, I'm centered with Flexbox!

</div>

А вот полное CSS-правило, придающее стиль этой разметке:

.CenterMe {

    background-color: indigo;

    color: #ebebeb;

    font-family: 'Oswald', sans-serif;

    font-size: 2rem;

    text-transform: uppercase;

    height: 200px;

    display: flex;

    align-items: center;

    justify-content: center;

}

Большинство пар «свойство — значение» в этом правиле просто устанавливают цветовые решения и размер шрифта. Нам интересны лишь три свойства:

.CenterMe {

    /* другие свойства */

    display: flex;

    align-items: center;

    justify-content: center;

}

Если вы еще не пользовались Flexbox или какими-либо свойствами из родственной спецификации Box Alignment Specification (http://www.w3.org/TR/css3-align/), эти свойства, возможно, покажутся вам несколько странными. Рассмотрим, что делает каждое из них.

• display: flex — это хлеб с маслом Flexbox. А именно, простая настройка элемента на его принадлежность к Flexbox (в противоположность блоку-контейнеру, линейному блоку и т. д.).

• align-items — это свойство приводит к выравниванию элементов внутри Flexbox по поперечной оси (в нашем примере текст выравнивается по вертикали).

• justify-content — это свойство задает выравнивание содержимого по центру главной оси. Что касается строки Flexbox, то об этом свойстве можно думать как о кнопке в текстовом процессоре, выравнивающей текст по левому или правому краю или по центру (хотя существуют и другие значения justify-content, которые также вскоре будут рассмотрены).

Итак, перед тем, как продолжить изучение свойств Flexbox, рассмотрим еще несколько примеров.

совет

В некоторых из этих примеров использовался имеющийся у Google шрифт Oswald (с откатом к шрифту sans-serif). В главе 5 мы рассмотрим способы использования правила @font-face, предназначенного для привязки к заказным файлам шрифтов.

Смещение элементов

А как вам понравится простой список элементов перехода, в котором один из этих элементов смещен в другую сторону?

Вот как это выглядит.

Вот разметка:

<div class="MenuWrap">

    <a href="#" class="ListItem">Home</a>

    <a href="#" class="ListItem">About Us</a>

    <a href="#" class="ListItem">Products</a>

    <a href="#" class="ListItem">Policy</a>

    <a href="#" class="LastItem">Contact Us</a>

</div>

А вот код CSS:

.MenuWrap {

    background-color: indigo;

    font-family: 'Oswald', sans-serif;

    font-size: 1rem;

    min-height: 2.75rem;

    display: flex;

    align-items: center;

    padding: 0 1rem;

}

.ListItem,

.LastItem {

    color: #ebebeb;

    text-decoration: none;

}

.ListItem {

    margin-right: 1rem;

}

.LastItem {

    margin-left: auto;

}

Как видите, не нужны никакие отдельно взятые плавающие элементы, линейные блоки или ячейки таблицы (table-cell)! При настройке display: flex;, примененной в отношении элемента-контейнера, его дочерние элементы становятся подстраива­емыми, выводимыми затем с использованием модели динамически изменяемой разметки. Все волшебство здесь заключается в свойстве margin-left: auto, которое заставляет этот элемент использовать все незаполненное место, доступное в данной стороне.

Изменение порядка следования элементов

Хотите изменить порядок следования элементов на обратный?

Можно просто добавить к элементу-контейнеру свойство flex-direction: row-reverse;, а для смещенного элемента вместо margin-left: auto написать margin-right: auto:

.MenuWrap {

    background-color: indigo;

    font-family: 'Oswald', sans-serif;

    font-size: 1rem;

    min-height: 2.75rem;

    display: flex;

    flex-direction: row-reverse;

    align-items: center;

    padding: 0 1rem;

}

.ListItem,

.LastItem {

    color: #ebebeb;

    text-decoration: none;

}

.ListItem {

    margin-right: 1rem;

}

.LastItem {

    margin-right: auto;

}

А что если нам захочется расположить элементы не горизонтально, а вертикально?

Да запросто. Измените свойство элемента-контейнера на flex-direction: column; и удалите автоматическую установку полей: