HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - Фрэйн .
Шрифт:
Интервал:
Закладка:
А это результат использования вместо него значения space-around.
Полагаю, что сомневаться в практической пользе этих двух значений у вас нет никаких оснований.
совет
Имеющиеся в модуле Flexbox различные свойства выравнивания теперь приводятся и в описании спецификации CSS Box Alignment Module Level 3. Тем самым закладывается общая основа с эффектами выравнивания других свойств отображения, такими как display: block; и display: table;. Спецификация все еще остается в силе, поэтому проверяйте ее состояние, обращаясь по адресу http://www.w3.org/TR/css3-align/.
Свойство flex
Мы уже использовали в отношении flex-элементов свойство width, но свойство flex позволяет определить по вашему желанию либо ширину, либо адаптивность. Чтобы проиллюстрировать его возможности, рассмотрим следующий пример, в котором для элементов используется та же разметка, но уже с исправленным кодом CSS:
.FlexItems {
border: 1px solid #ebebeb;
background-color: #34005B;
display: flex;
height: 100px;
flex: 1;
}
Фактически свойство flex является сокращенным определением трех отдельных свойств: flex-grow, flex-shrink и flex-basis. Более подробно спецификацию, в которой дается развернутое описание всех этих отдельных свойств, можно найти по адресу http://www.w3.org/TR/css-flexbox-1/. Но в этой спецификации рекомендуется использовать сокращенную форму в виде свойства flex, поэтому мы здесь его и рассмотрим.
Если для flex-элементов имеется свойство flex и браузер его поддерживает, то оно используется для указания размера элемента, а не значений ширины или высоты, если таковые имеются. Даже если после свойства flex указано значение ширины или высоты, оно все равно не будет действовать. Посмотрим, на что влияет каждое из этих значений.
• flex-grow (первое значение, которое может быть передано свойству flex) является величиной относительно других flex-элементов, до которой может увеличиваться flex-элемент при наличии свободного пространства.
• flex-shrink является величиной, до которой может уменьшаться flex-элемент относительно других flex-элементов, когда имеется дефицит пространства.
• flex-basis (последнее значение, которое может быть передано свойству flex) является базовым размером, к которому приводится размер flex-элемента.
Хотя можно просто написать flex: 1, я рекомендую записывать в свойство flex все три значения. Полагаю, вы понимаете, что должно произойти. Например, flex: 1 1 auto означает, что элемент будет увеличиваться на одну часть доступного пространства, он также станет уменьшаться до одной части, когда будет существовать дефицит пространства, и базовым размером для динамического изменения будет служить внутренняя ширина содержимого (размер, который был бы у содержимого, если бы динамическое изменение не требовалось).
Рассмотрим еще один вариант: настройка flex: 0 0 50px означает, что элемент не будет ни увеличиваться, ни уменьшаться и его базовая величина составит 50px (то есть он будет иметь размер 50 пикселов независимо от величины свободного пространства). А теперь разберем вариант flex: 2 0 50% — элемент будет стремиться занять два «лота» доступного пространства, он не станет уменьшаться и его базовый размер будет определяться значением 50%. Надеюсь, эти небольшие примеры немного развеяли мистику вокруг свойства flex.
совет
Если установить для свойства flex-shrink нулевое значение, то свойство flex-basis поведет себя как задание минимальной ширины.
Свойство flex можно представлять в виде способа задания отношений. Когда для каждого flex-элемента этому свойству присвоено значение 1, то все они занимают одинаковое пространство.
Хорошо, но чтобы проверить теорию на практике, внесем изменения в HTML-классы нашей разметки:
<div class="FlexWrapper">
<div class="FlexItems FlexOne">I am content in the inner Flexbox 1.</div>
<div class="FlexItems FlexTwo">I am content in the inner Flexbox 2.</div>
<div class="FlexItems FlexThree">I am content in the inner Flexbox 3.</div>
</div>
А так будет выглядеть измененный код CSS:
.FlexItems {
border: 1px solid #ebebeb;
background-color: #34005B;
display: flex;
height: 100px;
}
.FlexOne {
flex: 1.5 0 auto;
}
.FlexTwo,
.FlexThree {
flex: 1 0 auto;
}
В этом примере элемент с классом FlexOne занимает 1,5 того пространства, которое занято элементами с классами FlexTwo и FlexThree.
Этот сокращенный синтаксис проявляет свою реальную практичность для быстрой установки соизмеримости элементов. Например, если выдвигается требование «это должно быть в 1,8 раза шире всего остального», то его можно будет легко выполнить, используя свойство flex.
Надеюсь, вы уже начинаете понимать всю необычную эффективность свойства flex?
О Flexbox можно написать не одну главу! Примеров, достойных рассмотрения, великое множество. Но перед тем, как перейти к другой основной теме этой главы — адаптивным изображениям, мне хочется поделиться с вами еще двумя особенностями.
Простой зафиксированный подвал
Предположим, нужно, чтобы подвал находился в самом низу окна просмотра, даже когда основного содержимого недостаточно, для того чтобы он там оказался. Добиться нужного результата нелегко, но только не с Flexbox. Рассмотрим следующую разметку, которую можно увидеть в файле каталога example_03-08:
<body>
<div class="MainContent">
Here is a bunch of text up at the top. But there isn't enough
content to push the footer to the bottom of the page.
</div>
<div class="Footer">
However, thanks to flexbox, I've been put in my place.
</div>
</body>
А вот так выглядит код CSS:
html,
body {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
font-family: 'Oswald', sans-serif;
color: #ebebeb;
display: flex;
flex-direction: column;
min-height: 100%;
}
.MainContent {
flex: 1;
color: #333;
padding: .5rem;
}
.Footer {
background-color: violet;
padding: .5rem;
}
Посмотрите на окно браузера и попробуйте добавить содержимое в .MainContentdiv. Станет видно, что при недостаточном объеме содержимого подвал фиксируется в нижней части окна просмотра. Когда содержимого достаточно для заполнения окна, подвал располагается ниже содержимого.
Такая работа обусловливается тем, что наше свойство flex настроено на увеличение при наличии доступного пространства. Поскольку тело является flex-контейнером со 100 % минимальной высоты, основное содержимое может увеличиваться на все доступное пространство. Превосходно.
Изменение порядка следования исходных элементов
В CSS с момента появления этой технологии был только один способ переключения визуального порядка следования HTML-элементов на веб-странице. Такое переключение достигалось за счет помещения элементов внутрь какого-нибудь контейнера с настройкой display: table с последующим переключением свойства display в отношении находящихся внутри элементов между display: table-caption (элемент помещался в верхнюю часть контейнера), display: table-footer-group (элемент помещался в нижнюю часть контейнера) и display: table-header-group (элемент помещался непосредственно под элементом с настройкой display: table-caption). Но, несмотря на всю грубость этой технологии, ее воспринимали как весьма удачное обстоятельство, не принимая во внимание истинное назначение таких настроек.
А вот в модуле Flexbox имеется встроенная функция изменения порядка следования отображаемых элементов. Посмотрим, как она работает.
Рассмотрим следующую разметку:
<div class="FlexWrapper">
<div class="FlexItems FlexHeader">I am content in the Header.</div>
<div class="FlexItems FlexSideOne">I am content in the SideOne.</div>
<div class="FlexItems FlexContent">I am content in the Content.</div>
<div class="FlexItems FlexSideTwo">I am content in the SideTwo.</div>
<div class="FlexItems FlexFooter">I am content in the Footer.</div>
</div>
Обратите внимание на то, что третий элемент внутри общего контейнера имеет HTML-класс FlexContent, и представьте себе, что в этом div-контейнере предполагается размещать основное содержимое страницы.
Давайте не будем все усложнять. Добавим несколько простых цветовых настроек, чтобы было проще различать разделы, и поместим эти разделы в стопку в том самом порядке, в котором они появляются в разметке:
.FlexWrapper {
background-color: indigo;
display: flex;
flex-direction: column;
}
.FlexItems {
display: flex;
align-items: center;
min-height: 6.25rem;
padding: 1rem;
}
.FlexHeader {
background-color: #105B63;
}
.FlexContent {
background-color: #FFFAD5;
}
.FlexSideOne {
background-color: #FFD34E;
}
.FlexSideTwo {
background-color: #DB9E36;
}
.FlexFooter {
background-color: #BD4932;
}
Предположим, что нам нужно изменить порядок .FlexContent, сделав его первым разделом, не касаясь при этом разметки. С Flexbox эта задача решается простым добавлением всего лишь одной пары «свойство — значение»:
.FlexContent {
background-color: #FFFAD5;
order: -1;
}
Свойство order позволяет легко и просто пересмотреть порядок следования элементов внутри Flexbox. В данном примере значение -1 говорит о том, что нам нужно поместить элемент перед всеми остальными элементами.
