Полное руководство по Flexbox

Обзор ¶

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>

Try it Yourself »

В нашем примере элементы организованы в обратном порядке. Изменяйте значения свойства 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>

Try it Yourself »

Измените значение свойства 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>

Try it Yourself »

В нашем примере мы использовали значение 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>

Try it Yourself »

Свойство 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>

Try it Yourself »

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

Свойства 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>

Try it Yourself »

Свойство 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>

Try it Yourself »

Свойство 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>

Try it Yourself »

TIP

Рекомендуем использовать сокращенное свойство 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>

Try it Yourself »

TIP

Рекомендуем использовать сокращенное свойство 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>

Try it Yourself »

Свойство flex ¶

Свойство flex — это сокращение для flex-grow, flex-shrink и flex-basis вместе. Свойства flex-shrink и flex-basis необязательны.

Среди прочих значений это свойство может принимать auto (1 1 auto) или none (0 0 auto).

TIP

Мы настоятельно рекомендуем использовать сокращенное свойство 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>

Try it Yourself »

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>

Практика

Какие из следующих являются свойствами Flexbox в CSS?

flex-directionflex-wrapdisplay-inlinejustify-contentalign-contenttext-align