Полное руководство по Flexbox
Get started with using CSS Flexbox. This guide covers all major areas in Flexbox and includes examples and practical tips.
Обзор
Flexbox Layout, официально известный как CSS Flexible Box Layout Module, — это модель компоновки в CSS.
Flexbox — это одномерная модель раскладки, что означает, что элементы располагаются по одному измерению за раз: либо в строку, либо в столбец, но не одновременно в обоих направлениях. Это можно противопоставить двумерной модели — CSS Grid Layout, которая размещает элементы в двух измерениях одновременно (строки и столбцы вместе).
Flexbox был представлен как альтернатива CSS Floats для задания общего внешнего вида веб-страницы. Flexbox имеет множество преимуществ: в частности, с его помощью можно управлять выравниванием, направлением, порядком и размером элементов.
Элементы внутри flex-контейнера:
- могут быть организованы в любом направлении (влево, вправо, вниз или даже вверх) (flex-direction).
- могут иметь прямой (слева направо) или обратный (справа налево) порядок.
- могут иметь «flex»-ширину и высоту, чтобы заполнить доступное пространство (flex-item).
- могут динамически сжиматься или расширяться вдоль главной оси, сохраняя при этом размер вторичной поперечной оси.
- могут быть организованы линейно вдоль главной оси или переноситься на несколько строк вдоль или поперек поперечной оси.
Flexbox относительно новый, но сегодня он отлично поддерживается браузерами.
(Узнать больше о поддержке браузерами и совместимости).
Основы Flexbox
При работе с Flexbox нужно мыслить в терминах двух осей — главной оси и поперечной оси, а также различать flex-контейнеры и flex-элементы.
Главная и поперечная оси
Flexbox — это раскладка, ориентированная на одну ось; у нее есть главная ось и поперечная ось. Это означает, что элементы располагаются либо вдоль главной оси, либо вдоль поперечной оси. Поперечная ось всегда перпендикулярна главной.
Главная ось определяется свойством flex-direction, которое имеет следующие значения:
- row
- row-reverse
- column
- column-reverse
Если свойство flex-direction задано значениями row или row-reverse, то главная ось будет горизонтальной, то есть проходить вдоль строки в inline-направлении. А поперечная ось будет идти по столбцам.
Если свойство flex-direction задано значениями column или column-reverse, то главная ось будет вертикальной, то есть проходить сверху страницы вниз в block-направлении. Что касается поперечной оси, она будет идти вдоль строк.
Посмотрите на эту схему, чтобы лучше понять концепцию осей Flexbox.
- main axis - Главная ось flex-контейнера — это главная ось, вдоль которой размещаются flex-элементы.
- main-start | main-end - Flex-элементы размещаются внутри контейнера, начиная с main-start и двигаясь к main-end.
- main size - Ширина или высота flex-элемента в направлении главного измерения — это его main size.
- cross axis - Ось, перпендикулярная главной оси, направление которой зависит от направления главной оси (горизонтальное или вертикальное).
- cross-start | cross-end - Flex-линии заполняются элементами и помещаются в контейнер, начиная со стороны cross-start flex-контейнера и двигаясь к стороне cross-end.
- cross size - Ширина или высота flex-элемента в поперечном измерении — это его cross size.
Источник: W3.org
Flex-контейнеры и элементы
Flex-контейнер — это родительский элемент, который группирует набор дочерних элементов, flex-элементов. В большинстве случаев контейнер определяет расположение и позицию своих flex-элементов, однако flex-элементы можно изменять и по отдельности.
Чтобы превратить HTML-элемент в flex-контейнер, следует использовать свойство display со значениями flex (блочный flex-контейнер) или inline-flex (задает строчный flex-контейнер). В противном случае браузер проигнорирует все использованные вами свойства flexbox.
Flexbox container
.container {
display: flex; /* or inline-flex*/
}Свойства Flex-контейнера
Свойство flex-direction
Свойство flex-direction используется для создания раскладок в строку и в столбец. Оно задает направление главной оси flex-контейнера и порядок, в котором появляются элементы.
Свойство flex-direction имеет следующие значения:
- row - элементы отображаются вдоль строки слева направо.
- row-reverse - элементы отображаются справа налево.
- column - элементы отображаются вертикально сверху вниз.
- column-reverse - элементы отображаются вертикально снизу вверх.
Пример свойства flex-direction:
пример свойства flex-direction
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h3 {
color: #8ebf42;
}
.flex-container {
display: flex;
flex-direction: row-reverse;
padding: 30px;
border: 1px dashed #666;
}
.flex-container > div {
width: 80px;
height: 70px;
margin: 5px;
border-radius: 3px;
background-color: #1faadb;
}
</style>
</head>
<body>
<h3>row-reverse</h3>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>В нашем примере элементы организованы в обратном порядке. Изменяйте значения свойства flex-direction (row, column, column-reverse), чтобы увидеть, как меняется внешний вид элементов.
info
Примечание: row и row-reverse зависят от режима письма, поэтому в контексте rtl (справа налево) они будут соответственно инвертированы.
Свойство flex-wrap
По умолчанию все flex-элементы помещаются в одну строку, и если flex-элементы слишком широкие для контейнера, они будут выходить за его пределы. Чтобы этого избежать, следует использовать свойство flex-wrap для переноса элементов.
Свойство может принимать следующие значения:
- nowrap (по умолчанию) - flex-элементы отображаются в одной строке и по умолчанию помещаются по ширине flex-контейнера.
- wrap - flex-элементы отображаются в нескольких строках при необходимости слева направо и сверху вниз.
- wrap-reverse - flex-элементы отображаются в нескольких строках при необходимости слева направо и снизу вверх.
info
Примечание: Свойство зависит от режима письма, поэтому в контексте rtl (справа налево) они будут соответственно инвертированы.
Свойство justify-content
Свойство justify-content используется для задания горизонтального выравнивания элементов вдоль главной оси. Оно помогает распределять свободное пространство между flex-элементами на главной оси.
Значения justify-content следующие:
- flex-start (значение по умолчанию) - элементы размещаются в начале контейнера.
- flex-end - элементы размещаются в конце контейнера.
- center - элементы размещаются в центре контейнера.
- space-between - элементы равномерно распределяются в строке (с промежутками между ними); первый элемент находится в начале строки, последний — в конце.
- space-around - элементы отображаются с промежутками до, между и после.
- space-evenly - элементы распределяются так, чтобы расстояние между любыми двумя элементами (и до краев) было одинаковым.
Пример свойства justify-content:
свойство justify-content, примеры
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
padding: 10px;
margin-bottom: 20px;
background-color: #1faadb;
}
.flex-start {
justify-content: flex-start;
}
.flex-end {
justify-content: flex-end;
}
.center {
justify-content: center;
}
.space-between {
justify-content: space-between;
}
.space-around {
justify-content: space-around;
}
.flex-container > div {
width: 28%;
height: 45px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
.flex-container > div.item-two {
width: 18%;
}
</style>
</head>
<body>
<p>flex-start</p>
<div class="flex-container flex-start">
<div></div>
<div class="item-two"></div>
<div></div>
</div>
<p>flex-end</p>
<div class="flex-container flex-end">
<div></div>
<div class="item-two"></div>
<div></div>
</div>
<p>center</p>
<div class="flex-container center">
<div></div>
<div class="item-two"></div>
<div></div>
</div>
<p>space-between</p>
<div class="flex-container space-between">
<div></div>
<div class="item-two"></div>
<div></div>
</div>
<p>space-around</p>
<div class="flex-container space-around">
<div></div>
<div class="item-two"></div>
<div></div>
</div>
</body>
</html>Измените значение свойства justify-content, чтобы увидеть, как выравниваются элементы.
Свойство align-items
Свойство align-items используется для выравнивания элементов вдоль поперечной оси. Оно является полной противоположностью свойству justify-content, которое выравнивает элементы вдоль главной оси.
Значения align-items следующие:
- stretch (по умолчанию) - элементы растягиваются, чтобы заполнить контейнер.
- flex-start - элементы выравниваются по началу поперечной оси контейнера.
- flex-end- элементы выравниваются по концу поперечной оси контейнера.
- center- элементы выравниваются по центру поперечной оси.
- baseline - элементы выравниваются по своим базовым линиям.
info
Примечание: Если высота flex-контейнера ограничена, значение stretch может привести к тому, что содержимое flex-элемента выйдет за его пределы.
Пример свойства align-items:
свойство align-items, пример кода
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
align-items: center; /* Use another value to see the result */
height: 250px;
padding: 15px;
background-color: #1faadb;
}
.flex-container > div {
width: 15%;
height: 100%;
border-radius: 3px;
background-color: #8ebf42;
}
.flex-container .one {
height: 60%;
}
.flex-container .three {
height: 40%;
}
.flex-container .four {
height: 70%;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
</body>
</html>В нашем примере мы использовали значение center, чтобы выровнять элементы по центру по поперечной оси. Попробуйте другие значения и посмотрите результат.
Свойство align-content
Свойство align-content используется для выравнивания строк flex-контейнера внутри контейнера, когда в поперечной оси есть дополнительное пространство, так же как justify-content выравнивает отдельные элементы вдоль главной оси.
info
Примечание: Свойство align-property не работает, когда в flex-контейнере только одна строка.
Значения align-content и их смысл следующие:
- stretch (по умолчанию) - строки растягиваются, чтобы занять доступное пространство.
- flex-start - строки группируются в начале контейнера.
- flex-end - строки группируются в конце контейнера.
- center - строки группируются в центре контейнера.
- space-between - строки равномерно распределяются; первая строка находится в начале контейнера, а последняя — в конце.
- space-around - строки равномерно распределяются с одинаковым пространством вокруг каждой строки.
Пример свойства align-content:
пример свойства align-content
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
align-content: flex-end/* Use another value to see the result */;
min-height: 250px;
padding: 10px;
background-color: #1faadb;
}
.flex-container>div {
width: 45%;
height: 45px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
.flex-container .one,
.flex-container .nine {
width: 23%;
}
.flex-container .two,
.flex-container .six {
width: 9%;
}
.flex-container .three {
width: 25%;
}
.flex-container .four {
width: 35%;
}
.flex-container .five,
.flex-container .eleven {
width: 32%;
}
.flex-container .seven,
.flex-container .ten {
width: 6%;
}
</style>
</head>
<body>
<p>flex-end</p>
<div class="flex-container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
<div class="seven"></div>
<div class="eight"></div>
<div class="nine"></div>
<div class="ten"></div>
<div class="eleven"></div>
</div>
</body>
</html>Свойство gap
Свойство gap используется для задания пространства между flex-элементами.
Свойство flex-flow
Это сокращенное свойство для отдельных свойств flex-direction и flex-wrap, которые вместе определяют главную и поперечную оси flex-контейнера. Значение по умолчанию — row nowrap.
info
Примечание: Направления flex-flow зависят от режима письма, поэтому в контексте rtl (справа налево) содержимое будет соответственно инвертировано.
Пример свойства flex-flow:
свойство flex-flow, пример кода
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
flex-flow: row-reverse wrap; /* Use another value to see the result */
padding: 30px;
border: 1px dashed #666;
}
.flex-container > div {
width: 30%;
height: 70px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
text-align: center;
font-size: 28px;
font-weight: 700;
line-height: 70px;
color: #fff;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>Вы можете выбрать другое значение, чтобы увидеть, как меняется положение элементов.
Свойства Flex-элемента
Свойство order
По умолчанию элементы располагаются в том порядке, в котором они появляются в исходном коде (начиная с группы с наименьшим порядковым номером и далее вверх). Чтобы изменить порядок элементов в flex-контейнере, используется свойство order.
Свойство order задает порядок flex-элементов, распределяя их по порядковым группам. Оно принимает одно целочисленное значение, которое определяет порядковую группу, к которой принадлежит flex-элемент. Значение по умолчанию — 0.
Пример свойства order:
свойство order flexbox, порядок
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
flex-flow: row wrap;
padding: 30px;
border: 1px dashed #666;
}
.flex-container > div {
width: 30%;
height: 70px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
text-align: center;
font-size: 28px;
font-weight: 700;
line-height: 70px;
color: #fff;
}
.item-one {
order: 1;
}
.item-four {
order: -1;
}
.item-five {
order: 0;
}
.item-three {
order: 2;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="item-one">1</div>
<div class="item-two">2</div>
<div class="item-three">3</div>
<div class="item-four">4</div>
<div class="item-five">5</div>
</div>
</body>
</html>Свойство align-self
Это свойство используется для индивидуального выравнивания элементов внутри flex-контейнера. Flex-элементы выравниваются по поперечной оси строки flex-контейнера (так же как justify-content, но в перпендикулярном направлении). При задании свойства align-self оно переопределяет выравнивание, указанное align-items.
info
Примечание: Если у элемента любое поперечное поле задано как auto, align-self игнорируется.
Свойство align-self имеет те же значения, что и align-items. Для удобства они перечислены ниже.
- stretch (по умолчанию) - элементы растягиваются, чтобы заполнить контейнер.
- flex-start - элементы выравниваются по началу поперечной оси контейнера.
- flex-end- элементы выравниваются по концу поперечной оси контейнера.
- center - элементы выравниваются по центру поперечной оси.
- baseline - элементы выравниваются так, чтобы совпадали их базовые линии.
Пример свойства align-self:
пример свойства align-self
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
height: 300px;
padding: 10px;
border: 1px dashed #666;
}
.flex-container > div {
width: 15%;
height: 80%;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
div.item-two {
width: 20%;
}
div.item-three {
align-self: flex-end;
height: 80px;
margin: 0 10%;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="item-one"></div>
<div class="item-two"></div>
<div class="item-three"></div>
<div class="item-four"></div>
</div>
</body>
</html>Свойство flex-grow
Свойство flex-grow определяет способность элемента увеличиваться при необходимости. Оно задает коэффициент роста flex (относительно остальных элементов внутри контейнера), который определяет пространство, которое элемент должен занять в контейнере при распределении положительного пространства.
Свойство принимает безразмерное значение, которое служит пропорцией.
info
Примечание: Значение не может быть отрицательным числом.
Если все элементы в контейнере имеют одинаковое значение flex-grow (например, 1), то все элементы будут иметь одинаковый размер в контейнере.
Если размер одного из flex-элементов отличается (например, 2), то этот элемент займет вдвое больше пространства относительно размера других элементов (размер которых установлен в 1).
Пример свойства flex-grow:
свойство flex-grow, пример кода
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
margin-bottom: 20px;
}
.flex-container div {
flex-grow: 0.2;
padding: 30px 5px;
margin-right: -2px;
border: 2px solid #8ebf42;
}
.flex-container div.two {
flex-grow: 5;
}
.flex-container span {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
margin: auto;
border-radius: 50%;
background-color: #8ebf42;
font-size: 28px;
font-weight: 700;
color: #fff;
}
</style>
</head>
<body>
<div class="flex-container">
<div>
<span>1</span>
</div>
<div>
<span>2</span>
</div>
<div>
<span>3</span>
</div>
<div>
<span>4</span>
</div>
<div><span>5</span>
</div>
</div>
<div class="flex-container">
<div>
<span>1</span>
</div>
<div class="two">
<span>2</span>
</div>
<div>
<span>3</span>
</div>
<div>
<span>4</span>
</div>
<div>
<span>5</span>
</div>
</div>
</body>
</html>success
Рекомендуем использовать сокращенное свойство flex вместо flex-grow для управления гибкостью, так как оно корректно сбрасывает любые неуказанные компоненты для типичных случаев использования.
Свойство flex-shrink
Свойство flex-shrink задается, чтобы позволить flex-элементу сжиматься. Оно определяет пространство, которое элемент должен занять в контейнере при распределении отрицательного пространства.
Свойство принимает безразмерное значение.
info
Примечание: Значение не может быть отрицательным числом.
По умолчанию все flex-элементы могут сжиматься, но если мы зададим значение 0 (не сжимать), они сохранят исходный размер.
Пример свойства flex-shrink:
пример свойства flex-shrink
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
}
.flex-container div {
width: 120px;
padding: 30px 10px;
margin-right: -2px;
border: 2px solid #8ebf42;
}
.flex-container div.two {
flex-shrink: 0;
}
.flex-container span {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
margin: auto;
border-radius: 50%;
background-color: #8ebf42;
font-size: 28px;
font-weight: 700;
color: #fff;
}
</style>
</head>
<body>
<div class="flex-container">
<div>
<span>1</span>
</div>
<div class="two">
<span>2</span>
</div>
<div>
<span>3</span>
</div>
<div>
<span>4</span>
</div>
<div>
<span>5</span>
</div>
<div>
<span>6</span>
</div>
</div>
</body>
</html>success
Рекомендуем использовать сокращенное свойство flex вместо flex-shrink для управления гибкостью, так как оно корректно сбрасывает любые неуказанные компоненты для типичных случаев использования.
Свойство flex-basis
Свойство flex-basis задает начальный размер flex-элемента до того, как оставшееся пространство будет распределено в соответствии с flex-факторами. Свойство задается ключевым словом content или width.
Значения flex-basis следующие:
- auto (по умолчанию) - длина равна длине гибкого элемента.
- width - абсолютная длина, или процент от основного размера родительского flex-контейнера, или ключевое слово auto. Отрицательные значения недопустимы.
- content - определяет автоматическое определение размера на основе содержимого flex-элемента.
- initial - устанавливает это свойство в значение по умолчанию.
info
Примечание: Свойство content пока поддерживается не очень хорошо, поэтому не так просто понять, что делают его «родственники» max-content, min-content и fit-content.
Пример свойства flex-basis:
свойство flex-basis, пример кода
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
background-color: #8ebf42;
}
.flex-container div {
padding: 30px 10px;
margin-right: -2px;
border: 2px solid #8ebf42;
background-color: #fff;
}
.flex-container div.four {
flex-basis: 25%;
}
.flex-container span {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
margin: auto;
border-radius: 50%;
background-color: #8ebf42;
font-size: 28px;
font-weight: 700;
color: #fff;
}
</style>
</head>
<body>
<div class="flex-container">
<div>
<span>1</span>
</div>
<div>
<span>2</span>
</div>
<div>
<span>3</span>
</div>
<div class="four">
<span>4</span>
</div>
<div>
<span>5</span>
</div>
</div>
</body>
</html>Свойство flex
Свойство flex — это сокращение для flex-grow, flex-shrink и flex-basis вместе. Свойства flex-shrink и flex-basis необязательны.
Среди прочих значений это свойство может принимать auto (1 1 auto) или none (0 0 auto).
success
Мы настоятельно рекомендуем использовать сокращенное свойство flex вместо отдельных свойств.
Пример свойства flex:
flex вместо flex-shrink, пример кода
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
height: 150px;
padding: 10px;
margin-bottom: 20px;
border: 1px dashed #666;
}
.flex-container > div {
width: 15%;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
.second > div {
flex: 1;
}
</style>
</head>
<body>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
</div>
<div class="flex-container second">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>info
Примечание: Свойства CSS float, clear и vertical-align не влияют на flex-элементы.
Примеры Flexbox
Давайте рассмотрим несколько примеров CSS flexbox и посмотрим, какие типы макетов вы можете использовать в своих веб-проектах.
Центрирование элементов по вертикали и горизонтали
Центрирование элементов всеми доступными средствами в CSS всегда было проблемой. С появлением Flexbox эта проблема легко решается. С помощью свойств align-items, align-self и justify-content вы можете выравнивать элементы как по вертикали, так и по горизонтали.
Пример использования свойств align-items, align-self и justify-content для центрирования элементов по вертикали и горизонтали:
Centering Elements Vertically and Horizontally Flexbox
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 1px dashed #666;
}
.flex-container > div {
width: 70px;
height: 70px;
margin: 5px;
border-radius: 3px;
background-color: #1faadb;
}
</style>
</head>
<body>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>Адаптивная навигационная панель с поиском
Используя Flexbox, вы можете создать навигационную панель, где пункты меню выровнены слева, а строка поиска — справа (или наоборот). Навигационная панель адаптивна: она расширяется или сворачивается в зависимости от размера экрана.
Пример адаптивной навигационной панели:
Navbar with flexbox example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.main-nav {
display: flex;
padding: 15px;
border-radius: 5px;
background: #1c87c9;
color: #fff;
font-weight: 500;
}
.main-nav > ul {
display: flex;
flex: 2;
padding: 0;
margin: 0;
list-style-type: none;
}
.main-nav li {
margin-right: 20px;
}
.main-nav > form {
display: flex;
justify-content: flex-end;
flex: 1;
}
.main-nav input {
flex: 1;
padding: 5px;
}
.main-nav button {
padding: 0 20px;
margin-left: 10px;
border: 0;
border-radius: 20px;
background: #fff;
color: #666;
}
@media screen and (max-width: 575px) {
.main-nav {
flex-direction: column;
}
.main-nav ul {
margin-bottom: 10px;
}
}
</style>
</head>
<body>
<nav class="main-nav">
<ul>
<li>Home</li>
<li>About us</li>
<li>Services</li>
<li>Contact us</li>
</ul>
<form>
<input type="search" placeholder="Search" />
<button type="button">Go</button>
</form>
</nav>
</body>
</html>Макет Holy Grail
Паттерн макета Holy Grail очень популярен в вебе. Он включает шапку, подвал, основную область контента с фиксированной навигацией слева, контентом в центре и фиксированной боковой панелью справа.
Пример макета Holy Grail:
Holy Grail Layout with flexbox, example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
* {
box-sizing: border-box;
font-size: 18px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
.main {
display: flex;
flex: 1;
}
.main > article {
flex: 1;
}
.main > nav,
.main > aside {
flex: 0 0 20vw;
background: #d5dce8;
}
.main > nav {
order: -1;
}
header,
footer {
background: #1c87c9;
height: 15vh;
}
header,
footer,
article,
nav,
aside {
padding: 20px;
}
</style>
</head>
<body>
<header>Header</header>
<div class="main">
<article>Article</article>
<nav>Nav</nav>
<aside>Aside</aside>
</div>
<footer>Footer</footer>
</body>
</html>