Полное руководство по Flexbox
Начните работу с CSS Flexbox. Это руководство охватывает все ключевые аспекты Flexbox с примерами и практическими советами.
Обзор
Flexbox Layout, официально известный как CSS Flexible Box Layout Module, — это модель компоновки в CSS.
Flexbox является одномерной моделью компоновки, то есть размещает элементы в одном измерении за раз — либо в виде строки, либо в виде столбца, но не того и другого одновременно. Это отличает его от двумерной модели — CSS Grid Layout, которая располагает элементы в двух измерениях одновременно (строки и столбцы вместе).
Flexbox был введён как альтернатива CSS-флоатам для управления общим внешним видом веб-страниц. Flexbox обладает многочисленными преимуществами: с его помощью можно управлять выравниванием, направлением, порядком и размером элементов.
Элементы внутри flex-контейнера:
- могут быть организованы в любом направлении (влево, вправо, вниз или даже вверх) (flex-direction).
- могут иметь прямой (слева направо) или обратный (справа налево) порядок.
- могут иметь «гибкие» ширину и высоту для заполнения доступного пространства (flex-item).
- могут динамически сворачиваться или растягиваться вдоль главной оси, при этом сохраняя размер вторичной поперечной оси.
- могут быть организованы линейно вдоль главной оси или перенесены в несколько строк вдоль поперечной оси.
Flexbox относительно нов, но сегодня обладает отличной поддержкой браузеров.
(Узнайте больше о поддержке и совместимости с браузерами).
Основы Flexbox
При работе с Flexbox необходимо мыслить в терминах двух осей — главной оси и поперечной оси, а также различать flex-контейнеры и flex-элементы.
Главная и поперечная оси
Flexbox — это компоновка, ориентированная на одну ось; он имеет главную ось и поперечную ось. Это означает, что элементы располагаются либо вдоль главной оси, либо вдоль поперечной. Поперечная ось всегда перпендикулярна главной.
Главная ось определяется свойством flex-direction, которое принимает следующие значения:
- row
- row-reverse
- column
- column-reverse
Если свойство flex-direction задано значениями row или row-reverse, то главная ось будет горизонтальной, то есть будет проходить вдоль строки во встроенном направлении. Поперечная ось при этом будет проходить вниз по столбцам.
Если свойство flex-direction задано значениями column или column-reverse, то главная ось будет вертикальной, то есть будет проходить от верха страницы вниз в направлении блока. Поперечная ось при этом будет проходить вдоль строк.
Взгляните на эту схему, чтобы лучше понять концепцию осей Flexbox.
- main axis (главная ось) — основная ось flex-контейнера, вдоль которой размещаются flex-элементы.
- main-start | main-end — flex-элементы располагаются внутри контейнера начиная с main-start и заканчивая main-end.
- main size — ширина или высота flex-элемента по главному измерению является его основным размером.
- cross axis (поперечная ось) — ось, перпендикулярная главной; её направление зависит от направления главной оси (горизонтальной или вертикальной).
- cross-start | cross-end — строки flex-контейнера заполняются элементами и помещаются в контейнер, начиная со стороны cross-start и заканчивая стороной cross-end.
- cross size — ширина или высота flex-элемента по поперечному измерению является его поперечным размером.
Источник: W3.org
Flex-контейнеры и элементы
Flex-контейнер — это родительский элемент, который объединяет группу дочерних элементов, называемых flex-элементами. В большинстве случаев контейнер определяет компоновку и положение своих flex-элементов, однако flex-элементами можно управлять по отдельности.
Чтобы превратить HTML-элемент в flex-контейнер, следует использовать свойство display со значением flex (блочный flex-контейнер) или inline-flex (строчный flex-контейнер). В противном случае браузер проигнорирует все использованные вами flexbox-свойства.
Flexbox-контейнер
.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), чтобы увидеть, как изменяется внешний вид элементов.
Примечание: row и row-reverse зависят от режима написания, поэтому в контексте rtl (справа налево) они будут соответственно обращены.
Свойство flex-wrap
По умолчанию все flex-элементы размещаются в одну строку, и если они слишком широки для контейнера, то будут выходить за его пределы. Чтобы предотвратить это, следует использовать свойство flex-wrap для переноса элементов.
Это свойство принимает следующие значения:
- nowrap (по умолчанию) — flex-элементы отображаются в одну строку; по умолчанию они умещаются в ширину flex-контейнера.
- wrap — flex-элементы при необходимости отображаются в несколько строк, слева направо и сверху вниз.
- wrap-reverse — flex-элементы при необходимости отображаются в несколько строк, слева направо и снизу вверх.
Примечание: Это свойство зависит от режима написания, поэтому в контексте 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 — элементы выравниваются по базовой линии.
Примечание: Если высота 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 выравнивает отдельные элементы по главной оси.
Примечание: Свойство align-content не работает, если в 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-элементами (отступы), не добавляя пространства у внешних краёв контейнера. Это более чистая альтернатива установке margin на отдельные элементы, поскольку никогда не создаёт нежелательного отступа перед первым или после последнего элемента. Можно передать одно значение для одинакового отступа по строкам и столбцам или два значения (row-gap column-gap).
Свойство gap, пример кода
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 10px 20px; /* row-gap column-gap */
padding: 10px;
border: 1px dashed #666;
}
.flex-container > div {
width: 80px;
height: 70px;
border-radius: 3px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>Свойство flex-flow
Это сокращённое свойство для flex-direction и flex-wrap, которые вместе определяют главную и поперечную оси flex-контейнера. Значение по умолчанию — row nowrap.
Примечание: Направления 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.
Примечание: Если для любого из полей элемента по поперечной оси задано значение 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-элемента (относительно остальных элементов внутри контейнера), который определяет, какое пространство элемент должен занять в контейнере при распределении положительного свободного пространства.
Свойство принимает безразмерное значение, используемое как пропорция.
Примечание: Значение не может быть отрицательным числом.
Если все элементы в контейнере имеют одинаковое значение 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>Рекомендуем использовать сокращённое свойство flex вместо flex-grow для управления гибкостью, так как оно корректно сбрасывает все незаданные компоненты для работы в типовых сценариях.
Свойство flex-shrink
Свойство flex-shrink позволяет flex-элементу сжиматься. Оно определяет, какое пространство элемент должен занимать в контейнере при распределении отрицательного свободного пространства.
Свойство принимает безразмерное значение.
Примечание: Значение не может быть отрицательным числом.
По умолчанию все 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>Рекомендуем использовать сокращённое свойство flex вместо flex-shrink для управления гибкостью, так как оно корректно сбрасывает все незаданные компоненты для работы в типовых сценариях.
Свойство flex-basis
Свойство flex-basis задаёт начальный размер flex-элемента до того, как оставшееся пространство будет распределено в соответствии с коэффициентами flex. Свойство задаётся ключевым словом content или значением width.
Значения свойства flex-basis:
- auto (по умолчанию) — длина равна длине гибкого элемента.
- width — абсолютная длина, или процент от основного размера родительского flex-контейнера, или ключевое слово auto. Отрицательные значения недопустимы.
- content — определяет автоматический размер на основе содержимого flex-элемента.
- initial — устанавливает это свойство в значение по умолчанию.
Примечание: Свойство 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).
Настоятельно рекомендуем использовать сокращённое свойство 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>Примечание: CSS-свойства float, clear и vertical-align не влияют на flex-элементы.
Примеры Flexbox
Рассмотрим несколько примеров CSS Flexbox и посмотрим, какие варианты компоновки можно использовать в собственных веб-проектах.
Центрирование элементов по вертикали и горизонтали
Центрирование элементов всеми доступными способами в CSS всегда было проблемой. С появлением Flexbox эта задача решается легко. С помощью свойств align-items, align-self и justify-content можно выравнивать элементы как по вертикали, так и по горизонтали.
Пример свойств align-items, align-self и justify-content для центрирования элементов по вертикали и горизонтали:
Центрирование элементов по вертикали и горизонтали с помощью 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 можно создать панель навигации с пунктами меню, выровненными по левому краю, и строкой поиска, выровненной по правому краю (или наоборот). Панель навигации является адаптивной — она расширяется или сворачивается в зависимости от размера экрана.
Пример адаптивной панели навигации:
Пример навигации с Flexbox
<!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 с Flexbox, пример
<!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>