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

Разумеется, никто вас не заставляет всегда центрировать элементы внутри Flexbox. Существует несколько различных вариантов. Их мы сейчас и рассмотрим.

Свойства выравнивания, имеющиеся у Flexbox

Если вы хотите попрактиковаться с этим примером, его можно найти в файле каталога example_03-07. Не забудьте, что загружаемый код примера будет находиться в том состоянии, к которому мы придем к концу раздела, поэтому, если есть желание проработать все самостоятельно, лучше удалить CSS из файла примера и приступить к его созданию с нуля.

При изучении выравнивания, осуществляемого средствами Flexbox, важно разобраться с концепцией осей. В ней рассматриваются две оси: главная (main axis) и поперечная (cross axis). Что представляет собой каждая из них, зависит от направления, по которому распространяется Flexbox-контейнер. Например, если направление Flexbox-контейнера настроено на строку, главная ось будет горизонтальной, а поперечная ось — вертикальной.

И наоборот, если направление распространения вашего Flexbox-контейнера настроено на столбец, главная ось будет вертикальной, а поперечная ось — горизонтальной.

В помощь авторам в спецификации (http://www.w3.org/TR/css-flexbox-1/#justify-content-property) приводится следующая иллюстрация.

Основная разметка нашего примера имеет такой вид:

Зададим основные стили, относящиеся к Flexbox:

.FlexWrapper {

background-color: indigo;

display: flex;

height: 200px;

width: 400px;

}

.FlexInner {

background-color: #34005B;

display: flex;

height: 100px;

width: 200px;

}

В браузере будет получена следующая картинка.

Хорошо, а теперь проведем тестирование ряда свойств.

Свойство align-items

Свойство align-items позиционирует элементы относительно поперечной оси. Если применить это свойство к нашему элементу-контейнеру следующим образом:

.FlexWrapper {

background-color: indigo;

display: flex;

height: 200px;

width: 400px;

align-items: center;

}

то нетрудно представить, что элемент внутри контейнера получит вертикальное выравнивание по центру.

Точно такой же эффект будет применен к любому количеству находящихся внутри контейнера дочерних элементов.

Свойство align-self

Иногда нужно применить другую настройку выравнивания всего лишь к одному из элементов. Для самостоятельного выравнивания отдельных flex-элементов может использоваться свойство align-self. Сейчас я удалю прежние свойства выравнивания, добавлю в разметку еще два элемента, которые получат HTML-класс .FlexInner, а к среднему элементу добавлю еще один HTML-класс (.AlignSelf) и воспользуюсь им для добавления свойства align-self. Возможно, более наглядное представление об этом вы получите при просмотре следующего кода CSS:

.FlexWrapper {

background-color: indigo;

display: flex;

height: 200px;

width: 400px;

}

.FlexInner {

background-color: #34005B;

display: flex;

height: 100px;

width: 200px;

}

.AlignSelf {

align-self: flex-end;

}

А вот такой эффект будет получен на экране браузера.

Великолепно! Flexbox действительно с легкостью справился с этими изменения­ми. В данном примере свойству align-self было присвоено значение flex-end. Рассмотрим возможные значения, которыми можно будет воспользоваться относительно поперечной оси, а потом рассмотрим возможности выравнивания относительно главной оси.

Возможные значения выравнивания

Для выравнивания относительно поперечной оси в модуле Flexbox имеются следующие значения:

• flex-start — настройка элемента на flex-start заставит его начинаться с начальной границы своего flex-контейнера;

• flex-end — настройка элемента на flex-end заставит его выровняться по конечной границе своего flex-контейнера;

• center — заставит элемент расположиться посредине flex-контейнера;

• baseline — заставит все flex-элементы в контейнере выровняться по нижним строкам;

• stretch — заставит элементы растянуться по размеру их flex-контейнера (по поперечной оси).

Есть подробное описание, касающееся использования этих свойств, поэтому, если что-то не получается, всегда обращайтесь к спецификации за любым самым актуальным вариантом применения: http://www.w3.org/TR/css-flexbox-1/.

Свойство justify-content

Выравнивание по главной оси управляется свойством justify-content (для элементов, не находящихся в Flexbox-контейнере, предлагается также свойство justify-self, см. http://www.w3.org/TR/css3-align/). У свойства justify-content могут быть следу­ющие значения:

• flex-start;

• flex-end;

• center;

• space-between;

• space-around.

Действие первых трех из них для вас вполне ожидаемо. А вот что получается при использовании space-between и space-around, мы сейчас увидим. Рассмотрим следующую разметку:

А затем рассмотрим следующий код CSS. Мы настроили каждый из трех flex-элементов (FlexInner) на ширину 25 %, заключив их во flex-контейнер (FlexWrapper), настроенный на ширину 100 %.

.FlexWrapper {

background-color: indigo;

display: flex;

justify-content: space-between;

height: 200px;

width: 100%;

}

.FlexInner {

background-color: #34005B;

display: flex;

height: 100px;

width: 25%;

}

Все три элемента займут только 75 % доступного пространства, а свойство justify-content объясняет, что именно мы хотим получить от браузера относительно оставшегося пространства. Значение space-between заставит распределить свободное пространство поровну между элементами, а значение space-around заставит разместить его в равных долях вокруг элементов. Возможно, разобраться со всем этим помогут скриншоты — это работа значения space-between.

А это результат использования вместо него значения space-around.

Полагаю, что сомневаться в практической пользе этих двух значений у вас нет никаких оснований.

совет

Имеющиеся в модуле Flexbox различные свойства выравнивания теперь приводятся и в описании спецификации CSS Box Alignment Module Level 3. Тем самым закладывается общая основа с эффектами выравнивания других свойств отображения, такими как display: block; и display: table;. Спецификация все еще остается в силе, поэтому проверяйте ее состояние, обращаясь по адресу http://www.w3.org/TR/css3-align/.