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

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.