Макет страницы на Flexbox¶
Теперь рассмотрим создание стандартного макета страницы, который состоит их шапки, футера и центральной части, в которой есть три столбца: основное содержимое и два сайдбара.
Для этого определим следующую веб-страницу:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Flexbox в CSS3</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
font-family: verdana, arial, sans-serif;
}
body {
color: #fff;
font-size: 1.1em;
padding: 1em;
display: flex;
flex-direction: column;
}
main {
display: flex;
flex-direction: column;
}
article {
background-color: #546e7a;
flex: 2 2 12em;
padding: 1em;
}
nav,
aside {
flex: 1;
background-color: #455a64;
}
nav {
order: -1;
}
header,
footer {
flex: 0 0 5em;
background-color: #37474f;
}
@media screen and (min-width: 600px) {
body {
min-height: 100vh;
}
main {
flex-direction: row;
min-height: 100%;
flex: 1 1 auto;
}
}
</style>
</head>
<body>
<header>
<p>Header</p>
</header>
<main>
<article>
<h1>Что такое Lorem Ipsum?</h1>
<p>
Lorem Ipsum - это текст-"рыба", часто используемый
в печати и вэб-дизайне. Lorem Ipsum является
стандартной "рыбой" для текстов на латинице с
начала XVI века. В то время некий безымянный
печатник создал большую коллекцию размеров и форм
шрифтов, используя Lorem Ipsum для распечатки
образцов. Lorem Ipsum не только успешно пережил
без заметных изменений пять веков, но и перешагнул
в электронный дизайн. Его популяризации в новое
время
</p>
</article>
<nav>
<p>Navigation</p>
</nav>
<aside>
<p>Sidebar</p>
</aside>
</main>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
Итак, flex-контейнером верхнего уровня здесь является элемент body
. Его flex-элементами являются header
, main
и footer
. Body
располагает все свои элементы сверху вниз в столбик. Здесь также стоит отметить, что при ширине от 600px
и выше для заполнения всего пространства браузера у body
устанавливается стиль height: 100vh;
.
Элементы header
и footer
аналогичны. Их свойство flex: 0 0 5em;
указывают, что при любом изменении контейнера эти элементы будут иметь размер в 5em
. То есть они имеют статический размер.
Более сложным является элемент main
, который определяет основное содержимое. При этом будучи flex-элементом, он также является flex-контейнером для вложенных элементов и управляет их позиционированием. При ширине браузера до 600px
он располагает элементы в столбик, что очень удобно на мобильных устройствах.
При ширине от 600px
вложенные элементы nav
, article
и aside
располагаются в виде строки. И поскольку при такой ширине браузера родительский элемент body
заполняет по высоте все пространство браузера, то для заполнения всей высоты контейнера body
при его изменении у элемента main
устанавливается свойство flex: 1 1 auto;
.
У вложенных в main
flex-элементов стоит отметить, что элемент навигации nav
и элемент сайдбара aside
будут иметь одинаковые размеры при масштабировании контейнера. А элемент article
, содержащий основное содержимое, будет соответственно больше. При этом хотя nav определен после элемента article
, но благодаря установке свойства order: -1
блок навигации будет стоять до блока article
.