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

совет

Если есть намерение часто менять элементы местами, я бы порекомендовал расширить описание и присвоить каждому элементу порядковый номер. Это упростит понимание задачи в сочетании с медиазапросами.

Объединим наши новые возможности по изменению порядка следования с медиазапросами, чтобы получилась не просто различная разметка для разных размеров, а разный порядок следования элементов.

примечание

Код примера в окончательном виде можно найти в файле каталога example_03-09.

Пересмотрим разметку и поместим основное содержимое в начале документа, поскольку такой порядок обычно считается более разумным:

Сначала идет содержимое страницы, затем две боковые области, после этого заголовок и, наконец, подвал. Поскольку используется Flexbox, мы можем структурировать HTML в том порядке, который имеет смысл для документа независимо от того, как все должно располагаться при отображении на экране.

Для самых мелких экранов (вне каких-либо медиазапросов) порядок будет такой:

.FlexHeader {

background-color: #105B63;

order: 1;

}

.FlexContent {

background-color: #FFFAD5;

order: 2;

}

.FlexSideOne {

background-color: #FFD34E;

order: 3;

}

.FlexSideTwo {

background-color: #DB9E36;

order: 4;

}

.FlexFooter {

background-color: #BD4932;

order: 5;

}

Соответственно, в браузере будет наблюдаться такая картина.

А затем в контрольной точке произойдет переход к следующим настройкам:

@media (min-width: 30rem) {

.FlexWrapper {

flex-flow: row wrap;

}

.FlexHeader {

width: 100%;

}

.FlexContent {

flex: 1;

order: 3;

}

.FlexSideOne {

width: 150px;

order: 2;

}

.FlexSideTwo {

width: 150px;

order: 4;

}

.FlexFooter {

width: 100%;

}

}

Что в браузере будет выглядеть таким образом.

примечание

В данном примере использовалось сокращение flex-flow: row wrap. Это позволило flex-элементам располагаться на нескольких строках. Данное свойство относится к числу наименее поддерживаемых, поэтому в зависимости от того, насколько глубоко в прошлое должна простираться поддержка вашего продукта, может понадобиться заключить содержимое и две боковые панели в другой элемент.

Краткое заключение по Flexbox

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

Я думаю, что созидательная работа с использованием Flexbox вам понравится.

примечание

На пятки Flexible Box Layout Module уже наступает Grid Layout Module Level 1: http://www.w3.org/TR/css3-grid-layout/.

Этот модуль еще сыроват по сравнению с Flexbox (как и в ранней истории Flexbox, grid-разметка уже претерпела ряд существенных изменений), и поэтому мы не станем проявлять к нему пристальный интерес. Тем не менее его не нужно сбрасывать со счетов, поскольку этот модуль обещает дать еще более эффективные средства разметки веб-страниц.

Адаптивные изображения

Предоставление пользователям изображений, наиболее подходящих для конкретных характеристик применяемого устройства и среды, всегда было задачей не из легких. Особое звучание она приобрела с появлением адаптивного веб-дизайна, сама природа которого приспособлена для использования единой кодовой базы абсолютно для всех устройств.