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

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

А вот полное 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, предназначенного для привязки к заказным файлам шрифтов.

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

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

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

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

А вот код 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; и удалите автоматическую установку полей:

.MenuWrap {

background-color: indigo;

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

font-size: 1rem;

min-height: 2.75rem;

display: flex;

flex-direction: column;

align-items: center;

padding: 0 1rem;

}

.ListItem,

.LastItem {

color: #ebebeb;

text-decoration: none;

}

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

Хотите расположить элементы друг под другом в обратном порядке? Измените настройку на flex-direction: column-reverse;, и все будет сделано как надо.

примечание

Следует отметить, что для установки в одной настройке значений сразу двух свойств, и flex-direction, и flex-wrap, можно воспользоваться сокращением в виде свойства flex-flow. Например, настройка flex-flow: row wrap; установит строчное направление и включит возможность размещения блоков в нескольких строках. Но я считаю, что по крайней мере на первых порах проще будет указать эти два свойства по отдельности. Свойство flex-wrap также отсутствует в более ранних реализациях, поэтому в определенных браузерах его объявление может игнорироваться.

Различные разметки Flexbox внутри разных медиазапросов

Что касается поведения списка элементов в столбце на экранах меньшего размера и стиля разметки строки, Flexbox в соответствии со своим названием изначально способен динамически изменять разметку. При использовании Flexbox эта задача существенно облегчается:

.MenuWrap {

background-color: indigo;

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

font-size: 1rem;

min-height: 2.75rem;

display: flex;

flex-direction: column;

align-items: center;

padding: 0 1rem;

}

@media (min-width: 31.25em) {

.MenuWrap {

flex-direction: row;

}

}

.ListItem,

.LastItem {

color: #ebebeb;

text-decoration: none;

}

@media (min-width: 31.25em) {

.ListItem {

margin-right: 1rem;

}

.LastItem {

margin-left: auto;

}

}

Все это можно посмотреть, запустив в браузере файл каталога example_03-05. Чтобы увидеть различные разметки, нужно изменить размеры окна браузера.

inline-flex

У Flexbox имеется линейный вариант для дополнения линейных блоков (inline-block) и линейных таблиц (inline-table). Нетрудно догадаться, что для этого имеется объявление display: inline-flex;. Благодаря его превосходным возможностям по выравниванию по центру вы можете легко добиться весьма впечатляющих результатов.

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

Here is a sentence with a inline-flex link.

А вот для нее и код CSS:

.InlineFlex {

display: inline-flex;

align-items: center;

height: 120px;

padding: 0 4px;

background-color: indigo;

text-decoration: none;

border-radius: 3px;

color: #ddd;

}

Когда свойство inline-flex придается элементам анонимно (например, когда их родительский элемент не имеет настройки display: flex;), они сохраняют пробелы между элементами точно так же, как это происходит при использовании линейных блоков или линейных таблиц. Hо если такие элементы находятся внутри flex-контейнера, пробелы удаляются, что уже похоже на элементы, являющиеся ячейками таблицы внутри самой таблицы.