Эта статья представляет собой откорректированные выдержки из главы «Изменение стиля, перекодировка, изменение оформления с помощью CSS3» нашей книги Smashing Book #3, написанной Леа Веру и Дэвидом Стори. — Ред.
Гибкий блок шаблона (или flexbox) представляет собой новую модель блока, оптимизированную для шаблона пользовательского интерфейса. В качестве одного из первых модулей CSS, предназначенных для фактической коррекции расположения (возможность свободного перемещения в основном применялась для таких задач, как расположение текста вокруг изображения), flexbox гораздо упрощает многие задачи и делает возможным их выполнение. Инструментальный набор flexbox включает в себя простые центрирующие элементы (по горизонтали и вертикали), элементы расширения и сжатия, а также заполнение доступного пространства. Среди прочих возможностей стоит отметить возможность работы с исходным кодом шаблона.
Flexbox имеет насыщенный событиями жизненный путь. Его создали в качестве расширенного языка пользовательского интерфейса (XUL) для Mozilla, где он использовался для управления приложениями пользовательского интерфейса, такими как панель инструментов в Firefox. С тех пор он несколько раз был переписан. Только недавно спецификация достигла стабильности, и у нас появилась достаточно полная поддержка последних версий ведущих браузеров.
Однако существуют некоторые важные особенности. Спецификация менялась между реализацией в Internet Explorer (IE) и выпуском IE 10, так что вам придется использовать немного другой синтаксис. Chrome в настоящее время по-прежнему требует наличия префикса -webkit-, а Firefox и Safari все еще продолжают использовать старый синтаксис. Firefox был обновлен до последней версии спецификации. Реализация такого обновления привела к увеличению рабочего времени, проблемам со стабильной работой и часто возникающим ошибкам. Firefox по-прежнему нуждается в использовании старого синтаксиса.
Когда вы определяете, что элемент будет использовать Flexbox модель, его дочерние элементы раскладываются вдоль любой горизонтальной или вертикальной оси, в зависимости от указанного направления. Ширина дочерних элементов увеличивается или уменьшается, чтобы заполнить доступное пространство, базирующееся на гибкости длины направляющей.
Пример: горизонтальное и вертикальное центрирование (или Святой Грааль веб-дизайна).
Возможность центрирования элементов на странице, наверное, находится на первом месте среди желаний веб-дизайнеров. Такая возможность ценится даже выше, чем получение селектора родительских элементов или завершение страданий IE 6 (ну ладно, со вторым можно и поспорить). Благодаря использованию Flexbox все становится предельно просто. Давайте начнем с базового шаблона HTML, с категории, которую мы хотим отцентрировать. В конечном итоге, как только мы добавим всю стилистическую правку, результат будит напоминать эту демонстрацию вертикального и горизонтального центрирования.
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"/> <title>Centering an Element on the Page</title></head><body> <h1>OMG, I’m centered</h1></body>
</html>
Ничего особенного здесь нет, даже в упаковщике div. Все удивительное происходит в CSS:
html {height: 100%;}body {
display: -webkit-box; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* OLD: Firefox (buggy) */ display: -ms-flexbox; /* MID: IE 10 */ display: -webkit-flex; /* NEW, Chrome 21+ */display: flex; /* NEW: Opera 12.1, Firefox 22+ */-webkit-box-align: center; -moz-box-align: center; /* OLD… */
-ms-flex-align: center; /* You know the drill now… */ -webkit-align-items: center;align-items: center;-webkit-box-pack: center; -moz-box-pack: center;
-ms-flex-pack: center; -webkit-justify-content: center;justify-content: center;margin: 0;
height: 100%;width: 100% /* needed for Firefox */}h1 {
display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center;align-items: center;height: 10rem;
}Я включил все различные префиксные формы в CSS пример выше, начиная с самых старых, которые по-прежнему необходимы для формирования современного и, надеюсь, окончательного синтаксиса. Все это может показаться запутанным, но различные синтаксические схемы достаточно хорошо отображаются относительно друг друга. В конце статьи я решил привести таблицы, которые будут показывать точное распределение.
В нашем примере представлены не все необходимые CSS формы, потому что я удалил дополнительную стилистическую правку, которая как вы, наверное, уже знаете, используется в целях экономии пространства.
Давайте посмотрим на CSS, которые необходимы для центрирования заголовка на странице. Во-первых, мы устанавливаем html и body элементы, чтобы иметь 100% показатель height (высоты) и удалить все поля. Это позволит нашему контейнеру h1 занимать всю высоту окна браузера. Firefox также требует корректирования параметра width (ширины), указанного в теле, чтобы получить требуемый результат. Теперь нам просто нужно отцентрировать все элементы.
Активация Flexbox.
Поскольку body элемент содержит заголовок, который мы хотим отцентрировать, мы установим для display значение flex:
body { display: flex; }Эта команда заставит элемент body использовать шаблон Flexbox, а не регулярную планировку блока. Все его дочерние элементы в потоке документа (т.е. не абсолютно позиционируемые элементы) теперь станут гибкими пунктами.
Синтаксис, используемый в IE 10 display: -ms-flexbox, а более старые Firefox и WebKit-браузеры используют display: -prefix-box (где префикс либо moz либо webkit). В конце этой статьи вы сможете ознакомиться с таблицами, которые показывают специфику отображения для различных версий браузеров.
Что мы можем получить, когда наши элементы принадлежат требуемому классу и обладают гибкостью? Появляется широкий спектр возможностей: можно изменять размеры элементов и положение относительно свободного пространства, выполнять горизонтальное или вертикальное позиционирование, и даже можно достичь независимости исходного кода (два святых Грааля в пределах одной спецификации? Мы поступаем правильно).
Горизонтальное центрирование.
Следующей задачей будет горизонтальное центрирование h1 элемента. Вы можете утверждать, что в этом нет ничего страшного; это несколько проще, чем корректировать auto поля. Нам просто нужно сообщить flexbox о необходимости центрирования пунктов. По умолчанию гибкие элементы располагаются горизонтально, поэтому установка justify-content свойства позволит выровнять элементы вдоль главной оси:
body { display: flex; justify-content: center; }
Для IE 10 данное свойство называется flex-pack, а для старых версий браузеров – это box-pack (опять же, с использованием соответствующих префиксов). Используются также и другие возможные значения flex-start, flex-end, space-between и space-around. Это start, end, justify и distribute, соответственно, в IE 10 и старой спецификации (следует отметить, что команда distribute не поддерживаются в старой спецификации). Команда flex-start выравнивает значение по левому краю (или по правому краю при наличии перехода с правого на левый текст), flex-end создает выравнивание по правой стороне, space-between равномерно распределяет элементы вдоль оси, и space-around равномерно распределяет элементы вдоль оси, причем заполняется половина пространства в начале и в конце линии.
Для явного задания оси, вдоль которой должен быть расположен элемент, вы можете воспользоваться свойством flex-flow. По умолчанию используется свойство row, которое позволяет достигнуть аналогичного результата. Для выравнивания вдоль вертикальной оси, мы можем использовать flex-flow: column. Если добавить эту команду к нашему примеру, то можно заметить, что элемент будет отцентрирован по вертикали, но потеряет горизонтальное центрирование. Можно также добиться отображения в обратном порядке, добавляя -reverse к значению row или column (flex-flow: row-reverse или flex-flow: column-reverse), но это будет не слишком уместно для нашего примера, потому что у нас только один пункт.
В разных версиях спецификации существуют некоторые различия, которые представлены в конце этой статьи. Также следует иметь в виду, что flex-flow направление чувствительно к writing-mode. То есть, при использовании writing-mode: vertical-rl перехода на вертикальный текст (традиционно используемый в Китае, Японии и Корее), flex-flow: row выровняет элементы по вертикали, а column приведет их к горизонтальному позиционированию.
Вертикальное центрирование.
Вертикальное центрирование такое же простое, как и центрирование по горизонтали. Нам просто нужно воспользоваться соответствующим свойством для «поперечного» выравнивания. Это как? Поперечная ось в основном перпендикулярна к главной оси. Таким образом, если гибкие элементы расположены горизонтально, то поперечная ось будет вертикальной и наоборот. Мы устанавливаем ее с помощью свойства align-items (flex-align в браузере IE 10 и box-align для старых версий браузеров):
body { /* Remember to use the other versions for IE 10 and older browsers! */ display: flex; justify-content: center; align-items: center;}Это все, что нужно для центрирования элементов с помощью flexbox! Мы также можем использовать значения flex-start (начало) и flex-end (конец), а также baseline и stretch. Давайте еще раз взглянем на готовый пример:
Простое горизонтальное и вертикальное центрирование с помощью flexbox. Увеличенный вариант.
Вы, наверное, обратили внимание, что текст также выровнен по центру вертикально внутри h1 элемента. Это можно было бы сделать, изменяя поля или высоту строки, но мы снова воспользуемся возможностями flexbox, чтобы показать, что он работает и с безымянными блоками (в данном случае это строки текста внутри h1 элемента). Независимо от того, насколько высоким получится элемент h1, текст всегда будет располагаться по центру:
h1 { /* Remember to use the other versions for IE 10 and older browsers! */display:flex;
align-items:center;
height: 10rem;
}Гибкие размеры.
Было бы чертовски здорово, если бы flexbox мог выполнять центрирование всех элементов. Но это не все. Давайте посмотрим, как гибкие элементы могут расширяться и сжиматься для соответствия имеющемуся пространству внутри flexbox элемента. Посмотрите, как будет выглядеть в вашем браузере следующий пример.
Интерактивное слайд-шоу создано с использованием flexbox. Увеличенный вариант.
HTML и CSS код для этого примера похож на предыдущий код. Мы активируем flexbox и выполняем центрирование элементов на странице тем же способом. Кроме того, мы хотим, чтобы название (внутри header элемента) сохраняло свои размеры неизменными, в то время как пять блоков (section элементов) подстраивали размер, чтобы заполнить ширину окна. Чтобы сделать это, мы используем новое flex свойство:
section { /* removed other styles to save space */ -prefix-box-flex: 1; /* old spec webkit, moz */ flex: 1;height: 250px;
}Давайте посмотрим, что выполняется в данном примере. Каждому элементу секционирования соответствует 1 flex единица. Поскольку мы не установили значение ширины, то каждый из пяти блоков будет иметь одинаковую ширину. Элемент header займет установленную ширину (277 пикселей), поскольку он не является гибким. Разделим оставшуюся ширину внутри body элемента на 5, чтобы вычислить ширину каждой секции элементов. Теперь, если мы будем изменять размер окна браузера, элементы секционирования будут соответствующим образом расти или уменьшаться.
В этом примере мы установили последовательную высоту, но можно было аналогичным образом создать гибкость. Не всегда требуется, чтобы все элементы были одного и того же размера, так что давайте сделаем один большой. Мы установили для элемента две flex единицы:
section:hover {
-prefix-box-flex: 2; flex: 2; cursor: pointer; }Сейчас свободное пространство делится на 6 частей, а не 5, а элемент получается в два раза больше базовой суммы. Следует отметить, что элемент с 2 гибкими единицами не обязательно становится в два раза шире элемента с 1 единицей. Он просто занимает двойную долю свободного пространства, добавляя к своей «предпочтительной ширине». В наших примерах значение «предпочтительной ширины» равно 0 (по умолчанию).
Независимость исходного порядка.
В этом разделе мы научимся достигать независимости исходного порядка в шаблонах. Предположим, что нам необходимо при нажатии на блок заставить его переместиться влево от всех других блоков, непосредственно после названия. Все, что нам нужно сделать, это установить значение свойства order. По умолчанию все flex единицы находятся в нулевой позиции. Поскольку все они занимают одинаковое положение, то и зависят от исходного порядка. …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров