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.
