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

.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;. Благодаря его превосходным возможностям по выравниванию по центру вы можете легко добиться весьма впечатляющих результатов.

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

<p>Here is a sentence with a <a href="http://www.w3.org/TR/css-

flexbox-1/#flex-containers" class="InlineFlex">inline-flex link</a>.</p>

А вот для нее и код 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-контейнера, пробелы удаляются, что уже похоже на элементы, являющиеся ячейками таблицы внутри самой таблицы.

Разумеется, никто вас не заставляет всегда центрировать элементы внутри 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) приводится следующая иллюстрация.

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

<div class="FlexWrapper">

    <div class="FlexInner">I am content in the inner Flexbox.</div>

</div>

Зададим основные стили, относящиеся к 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, мы сейчас увидим. Рассмотрим следующую разметку:

<div class="FlexWrapper">

    <div class="FlexInner">I am content in the inner Flexbox 1.</div>

    <div class="FlexInner">I am content in the inner Flexbox 2.</div>

    <div class="FlexInner">I am content in the inner Flexbox 3.</div>

</div>

А затем рассмотрим следующий код 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.