Flexbox css руководство

Время на прочтение
11 мин

Количество просмотров 451K

Полное руководство по CSS flexbox. Это полное руководство объясняет все о flexbox, сосредотачиваясь на всех возможных свойствах для родительского элемента (контейнер flex) и дочерних элементов (элементы flex). Оно также включает в себя историю, демонстрации, шаблоны и таблицу поддержки браузеров.

Свойства для Родителя (flex контейнер)

display

Определяет flex контейнер; inline или block в зависимости от заданного значения. Включает flex контекст для всех потомков первого уровня.

.container {
  display: flex; /* or inline-flex */
}

Имейте в виду:

Обратите внимание, что CSS-столбцы columns не влияют на flex контейнер.

flex-direction

Устанавливает основную ось, таким образом определяя направление flex элементов, помещаемых в flex контейнер. Flexbox — это (помимо дополнительной упаковки) концепция однонаправленного макета. Думайте о flex элементах, как о первичных раскладках в горизонтальных рядах или вертикальных столбцах.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row (по умолчанию): слева направо в ltr; справа налево в rtl
• row-reverse справа налево ltr; слева направо в rtl
• column: так же, как и row но сверху вниз
• column-reverse: то же самое, row-reverse но снизу вверх

flex-wrap

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

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap (по умолчанию): все flex элементы будут в одной строке
• wrap: flex-элементы будут перенесены на несколько строк сверху вниз.
• wrap-reverse: flex-элементы будут перенесены на несколько строк снизу вверх.

Посмотреть визуальные демоверсии поведения flex-wrap можно здесь.

flex-flow (Применяется к: родительскому элементу flex-контейнера)

Это сокращение для flex-direction и flex-wrap свойств, которые вместе определяют основные и поперечные оси flex контейнера. Значением по умолчанию является row nowrap.

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

justify-content

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

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

• flex-start (по умолчанию): элементы сдвинуты в начало flex-direction направления.
• flex-end: элементы сдвинуты ближе к концу flex направления.
• start: элементы сдвинуты к началу writing-mode направления.
• end: элементы сдвинуты в конце writing-mode направления.
• left: элементы сдвинуты по направлению к левому краю контейнера, если это не имеет смысла flex-direction, тогда он ведет себя как start.
• right: элементы сдвинуты по направлению к правому краю контейнера, если это не имеет смысла flex-direction, тогда он ведет себя как start.
• center: элементы центрированы вдоль линии
• space-between: элементы равномерно распределены по линии; первый элемент находится в начале строки, последний элемент в конце строки
• space-around: элементы равномерно распределены по линии с одинаковым пространством вокруг них. Обратите внимание, что визуально пространства не равны, так как все элементы имеют одинаковое пространство с обеих сторон. Первый элемент будет иметь одну единицу пространства напротив края контейнера, но две единицы пространства между следующим элементом, потому что у следующего элемента есть свой собственный интервал, который применяется.
• space-evenly: элементы распределяются таким образом, чтобы расстояние между любыми двумя элементами (и расстояние до краев) было одинаковым.

Обратите внимание, что поддержка браузером этих значений имеет свои нюансы. Например, space-between никогда не получал поддержку Edge, а start / end / left / right еще нет в Chrome. В MDN есть подробные графики. Самые безопасные значения это flex-start, flex-end и center.

Есть также два дополнительных ключевых слова, которые вы можете связать с этими значениями: safe и unsafe. Использование safe гарантирует, что как бы вы ни занимались этим типом позиционирования, вы не сможете расположить элемент таким образом, чтобы он отображался за пределами экрана (например, сверху) так, чтобы содержимое тоже не могло быть прокручено (это называется «потеря данных»).

align-items

Это свойство определяет поведение по умолчанию того, как flex элементы располагаются вдоль поперечной оси на текущей линии. Думайте об этом как о justify-content версии для поперечной оси (перпендикулярной главной оси).

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

• stretch (по умолчанию): растягивать, чтобы заполнить контейнер (все еще соблюдаются min-width / max-width)
• flex-start / start / self-start: элементы размещаются в начале поперечной оси. Разница между ними невелика и заключается в соблюдении flex-direction правил или writing-mode правил.
• flex-end / end / self-end: элементы располагаются в конце поперечной оси. Разница опять-таки тонкая и заключается в соблюдении flex-direction или writing-mode правил.
• center: элементы центрированы по поперечной оси
• baseline: элементы выровнены, по их базовой линии

safe и unsafe ключевые слова модификаторов могут быть использованы в сочетании со всеми из этих ключевых слов (хотя это поддерживается не всеми браузерами), это помогает предотвратить выравнивание элементов таким образом, что содержание становится недоступным.

align-content

Это свойство выравнивает линии в пределах flex контейнера, когда есть дополнительное пространство на поперечной оси, подобно тому, как justify-content выравнивает отдельные элементы в пределах главной оси.

Примечание: это свойство не действует, когда есть только одна строка flex элементов.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

• flex-start / start: элементы, сдвинуты в начало контейнера. Более поддерживаемый flex-start использует, flex-direction в то время как start использует writing-mode направление.
• flex-end / end: элементы, сдвинуты в конец контейнера. Более поддерживаемый flex-end использует flex-direction в то время как end использует writing-mode направление.
• center: элементы выровнены по центру в контейнере
• space-between: элементы равномерно распределены; первая строка находится в начале контейнера, а последняя — в конце
• space-around: элементы равномерно распределены с равным пространством вокруг каждой строки
• space-evenly: элементы распределены равномерно, вокруг них одинаковое пространство
• stretch (по умолчанию): линии растягиваются, чтобы занять оставшееся пространство

safe и unsafe ключевые слова модификаторов могут быть использованы в сочетании со всеми из этих ключевых слов (хотя это поддерживается не всеми браузерами), это помогает предотвратить выравнивание элементов таким образом, что содержание становится недоступным.

Свойства для первых дочерних элементов(flex элементы)

order

По умолчанию flex элементы располагаются в исходном порядке. Однако свойство order управляет порядком их появления в контейнере flex.

.item {
  order: <integer>; /* default is 0 */
}

flex-grow

Это свойство определяет способность flex элемента растягиваться в случае необходимости. Оно принимает значение от нуля, которое служит пропорцией. Это свойство, какое количество доступного пространства внутри гибкого контейнера должен занимать элемент.

Если для всех элементов flex-grow установлено значение 1, оставшееся пространство в контейнере будет равномерно распределено между всеми дочерними элементами. Если один из дочерних элементов имеет значение 2, этот элемент займет в два раза больше места, чем остальные (или попытается, по крайней мере).

.item {
  flex-grow: <number>; /* default 0 */
}

Отрицательные числа не поддерживаются.

flex-shrink

Это свойство определяет способность гибкого элемента сжиматься при необходимости.

.item {
  flex-shrink: <number>; /* default 1 */
}

Отрицательные числа не поддерживаются.

flex-basis

Это свойство определяет размер элемента по умолчанию перед распределением оставшегося пространства. Это может быть длина (например, 20%, 5rem и т.д.) Или ключевое слово. Ключевое слово auto означает «смотри на мое width или height свойство». Ключевое слово content означает «размер на основе содержимого элемента» — это ключевое слово все еще не очень хорошо поддерживается, так что трудно проверить что для него используется max-content, min-content или fit-content.

.item {
  flex-basis: <length> | auto; /* default auto */
}

Если установлено значение 0, дополнительное пространство вокруг содержимого не учитывается. Если установлено значение auto, дополнительное пространство распределяется в зависимости от его flex-grow значения.

flex

Это сокращение для использования flex-grow, flex-shrink и flex-basis вместе. Второй и третий параметры (flex-shrink и flex-basis) являются необязательными. По умолчанию это 0 1 auto.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Рекомендуется использовать это сокращенное свойство, а не устанавливать отдельные свойства. Это сокращение разумно устанавливает другие значения.

align-self

Это свойство позволяет переопределить выравнивание по умолчанию (или указанное с помощью align-items) для отдельных элементов flex.
Пожалуйста, смотрите align-items свойство, чтобы понять доступные значения.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Обратите внимание что свойства float, clear и vertical-align не влияют на flex элементы.

Примеры

Давайте начнем с очень простого примера, решающего почти ежедневную проблему: идеальное центрирование. Самое простое решение для этой задачи — это использовать flexbox.

.parent {
  display: flex;
  height: 300px; /* Или что угодно */
}

.child {
  width: 100px;  /* Или что угодно */
  height: 100px; /* Или что угодно */
  margin: auto;  /* Магия! */
}

Так происходит благодаря тому, что свойство вертикального выравнивания margin установленное в auto во flex контейнере, поглощает дополнительное пространство. Таким образом, установка margin в auto сделает объект идеально отцентрированным по обеим осям.

Теперь давайте используем еще несколько свойств. Рассмотрим список из 6 элементов, все с фиксированными размерами, но могут быть и авторазмеры. Мы хотим, чтобы они были равномерно распределены по горизонтальной оси, чтобы при изменении размера браузера все масштабировалось хорошо и без медиа запросов.

.flex-container {
  /* Сначала мы создаем flex контекст */
  display: flex;
  
  /* Затем мы определяем flex-direction и разрешаем элементам переходить на новые строки
   * Запомните, что это то же самое что и:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  
  /* Затем мы определяем, как распределяется оставшееся пространство */
  justify-content: space-around;
}

Готово. Все остальное — это просто стайлинг.

Если изменить разрешение экрана ли масштаб, то будет так:

Давайте попробуем что-нибудь еще. Представьте, что у нас есть выровненные по правому краю элементы навигации в верхней части нашего веб-сайта, но мы хотим, чтобы они были выровнены по ширине на экранах среднего размера и располагались в один столбец на небольших устройствах. Это достаточно просто.

/* Большие экраны */
.navigation {
  display: flex;
  flex-flow: row wrap;
  /* Это выровняет элементы по конечной части линии на главной оси */
  justify-content: flex-end;
}

/* Средние экраны */
@media all and (max-width: 800px) {
  .navigation {
    /* На экранах среднего размера мы центрируем элементы, равномерно распределяя пустое пространство вокруг элементов */
    justify-content: space-around;
  }
}

/* Маленькие экраны */
@media all and (max-width: 500px) {
  .navigation {
    /* На маленьких экранах мы больше не используем направление строки, а используем столбец */
    flex-direction: column;
  }
}

Давайте попробуем что-то еще лучше, играя с гибкостью flex элементов! Как насчет 3-колоночного макета в полную высоту страницы с хедором и футером. И не зависит от исходного порядка элементов.

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

/* Мы говорим, что все элементы имеют ширину 100%, через flex-base */
.wrapper > * {
  flex: 1 100%;
}

/* Мы используем исходный порядок для первого мобильно варианта
 * 1. header
 * 2. article
 * 3. aside 1
 * 4. aside 2
 * 5. footer
 */

/* Средние экраны */
@media all and (min-width: 600px) {
  /* Мы говорим обеим боковым панелям встать в одну строку */
  .aside { flex: 1 auto; }
}

/* Большие экраны */
@media all and (min-width: 800px) {
  /* Мы инвертируем порядок первой боковой панели и основной и говорим главному элементу, чтобы он занимал вдвое большую ширину, чем две другие боковые панели
   */
  .main { flex: 2 0px; }
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

.wrapper {
  @include flexbox();
}

.item {
  @include flex(1 200px);
  @include order(2);
}

Поддержка в браузерах

Разбита по «версии» flexbox:

• (new) означает недавний синтаксис из спецификации (например display: flex;)
• (tweener) означает странный неофициальный синтаксис с 2011 года (например display: flexbox;)
• (old) означает старый синтаксис с 2009 года (например display: box;)

Blackberry Browser 10+ поддерживает новый синтаксис.

Для получения дополнительной информации о том, как смешивать синтаксисы, чтобы получить лучшую поддержку браузера, пожалуйста, обратитесь к этой статье (CSS-хитрости) или этой статье (DevOpera).

<div class="container">
        <div class="inner-div">
            <p>1</p>
        </div>
        <div class="inner-div">
            <p>2</p>
        </div>
        <div class="inner-div">
            <p>3</p>
        </div>
      </div>

p {
    padding-top: 40px;
    margin: 0;
    font-size: 100px;
    font-family: sans-serif;
    text-align: center;
    vertical-align: middle;
  }


.inner-div {
    height: 200px;
    width: 400px;
    margin: 10px;
    background-color: #096eeb;
  }

.container {
    display: flex;
}

.container {
    display: flex;
    flex-direction: row;
    /*flex-direction: row-reverse; */
    /*flex-direction: column; */
    /*flex-direction: column-reverse; */
}

.container {
    display: flex;
    flex-wrap: nowrap;
    /*flex-wrap: wrap; */
    /* flex-wrap: wrap-reverse; */
}

.container {
  display: flex;
  flex-flow: row wrap;
}

.container {
    display: flex;
    justify-content: flex-start;
    /* justify-content: flex-end; */
    /* justify-content: center; */
    /* justify-content: space-between; */
    /* justify-content: space-around; */
    /* justify-content: space-evenly; */
}

.container {
    display: flex;
    align-items: stretch;
    /*align-items: flex-start;*/
    /*align-items: flex-end;*/
    /*align-items: center;*/
    /*align-items: baseline;*/
}

.container {
    height: 600px;
    flex-wrap: wrap;
    display: flex;
    align-content: flex-start;
/*  align-content: flex-end; */
/*  align-content: center; */
/*  align-content: space-between; */
/*  align-content: space-around; */
/*  align-content: stretch;  */
}

container {
	display: flex;
	gap: 50px;
  /*row-gap: 50px;*/
  /*column-gap: 50px;*/
  /*gap: 50px 100px;*/
}

<div class="container container_view">
        <div class="inner-div item-1">
            <p>1</p>
        </div>
        <div class="inner-div item-2">
            <p>2</p>
        </div>
        <div class="inner-div item-3">
            <p>3</p>
        </div>
</div>

.container {
    display: flex;
}

.item-1 {
    order: 2;
}

.item-2 {
    order: 1;
}

.item-3 {
    order: 3;
}

.container {
  display: flex;
}

.item-1 {
  flex-grow: 0;
}

.item-2 {
  flex-grow: 0;
}

.item-3 {
  flex-grow: 0;
}

.container {
    display: flex;
}


.item-1 {
    flex-shrink: 1;
  /*flex-shrink: 2;*/
  /*flex-shrink: 3;*/
}


.item-2 {
    flex-shrink: 2;
  /*flex-shrink: 2;*/
}


.item-3 {
    flex-shrink: 1;
}

Научитесь: Профессия Frontend-разработчик PRO
Узнать больше

Предисловие

Модуль Flexbox Layout (Flexible Box) направлен на то чтобы предоставить более эффективный способ расположения, выравнивания и распределения свободного пространства между элементами в контейнере, даже когда их размер заранее неизвестен и/или динамичен (поэтому слово «flex»).

Основная идея гибкой (flex) разметки заключается в том, чтобы предоставить контейнеру возможность изменять ширину/высоту (и порядок) своих элементов, для того чтобы наилучшим образом заполнить доступное пространство (в основном для размещения на всех типах и размерах экранов). Flexbox контейнер расширяет элементы чтобы заполнить свободное пространство или сжимает их чтобы избежать переполнения.

Самое главное, что Flexbox это направленный агностик в отличии от обычных раскладок (блоков основанных на вертикальном позиционировании и строковых элементов основанных на горизонтальном позиционировании). Не смотря на то что они достаточно хорошо работают, им не хватает гибкости для поддержки больших или сложных приложений (особенно когда речь идёт об изменении ориентации, изменении размеров, растягивании, сжатии и т. д.). 

Примечание. Flexbox больше подходит для компонентов приложения и небольших макетов, тогда как CSS Grid предназначен для более масштабных макетов.

Основы и терминология

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

Если обычная система компоновки основана на блочных и строковых направлениях, то Flexbox основан на «flex-flow направлениях». Пожалуйста взгляните на этот рисунок из спецификации, объясняющий основную идею Flexbox.

В основном элементы будут располагаться вдоль основной оси (от main-start к main-end) или попереченой оси (от cross-start к cross-end).

• main axis — это основная ось flex-контейнера, вдоль которой расположены flex-элементы. Берегитесь того, что это не обязательно горизонтальная ось; Она зависит от свойства flex-direction;
• 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-элемента, в зависимости направления поперечной оси;

Поддержка браузерами

Браузер Blackberry начиная с 10 версии поддерживает новый синтаксис.

Содержание

Свойства для родительского элемента
(Flex-контейнера)

.container {
  display: flex; /* или inline-flex */
}

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

.container{
  flex-flow: <‘flex-direction’> || <‘flex-wrap’>;
}

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

Свойства для дочерних элементов
(Flex элементов)

.item {
  order: <integer>;
}

.item {
  flex-grow: <number>; /* по умолчанию 0 */
}

.item {
  flex-shrink: <number>; /* по умолчанию 1 */
}

.item {
  flex-basis: <length> | auto; /* по умолчанию auto */
}

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Примеры

Давайте начнём с самого простого примера, решающего задачу, которая возникает почти каждый день: идеальное центрирование. Не может быть ничего проще, если вы используете Flexbox.

.parent {
  display: flex;
  height: 300px;
}

.child {
  width: 100px; 
  height: 100px;
  margin: auto;
}

Это зависит от того, что margin , установленный в auto  у flex-контейнера, поглощает дополнительное пространство. Таким образом, установка вертикального margin в auto у элемента, сделает элемент идеально центрированным по обеим осям.

Теперь давайте используем ещё несколько свойств. Рассмотрим список из 6 элементов, все с фиксированным размером в эстетическом отношении, но они могут быть автоматическими. Мы хотим, чтобы они были равномерно распределены вдоль горизонтальной оси и чтобы при изменении размера браузера всё было в порядке (без медиа-запросов!).

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

Готово! Всё остальное, это лишь некоторые проблемы дизайна. Ниже приведён пример на CodePen, обязательно зайдите туда и попробуйте изменить размер окон, чтобы посмотреть что произойдёт.

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

.navigation {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
}

@media all and (max-width: 800px) {
  .navigation {
    justify-content: space-around;
  }
}

@media all and (max-width: 500px) {
  .navigation {
    flex-direction: column;
  }
}

Давайте попробуем сделать что-нибудь ещё лучше, играясь с гибкостью наших flex-элементов! Как насчёт трёхколоночного mobile-first макета с шапкой и футером на всю ширину экрана, и чтобы не было зависимости от исходного порядка элементов.

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

.header, .main, .nav, .aside, .footer {
  flex: 1 100%;
}

@media all and (min-width: 600px) {
  .aside { flex: 1 auto; }
}

@media all and (min-width: 800px) {
  .main { flex: 2 0px; }
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

Связанные свойства

Ошибки

Безусловно Flexbox не без ошибок. Лучшая коллекция, которую я видел представлена Philip Walton и Greg Whitworth’s Flexbugs. Это Open Source место для отслеживания всех ошибок, поэтому я думаю, что лучше всего просто оставить ссылку. 

CSS Flexbox позволяет размещать и упорядочивать элемент по горизонтали и вертикали, что делает веб-страницу гибкой и простой для понимания. Flexbox — то не просто свойство, это модуль макета CSS.

• CSS Flexbox — это модуль компоновки CSS , который используется для упорядочивания элементов на веб-страницах в одном направлении, т. е. по горизонтали и вертикали.
• Помогает создавать отзывчивые макеты, где мы можем настраивать гибкие элементы внутри flex-контейнера.
• Используется для заполнения дополнительного доступного пространства или уменьшения размера содержимого, если оно переполняется.

Синтаксис:

display: flex;

Рассмотрим пример. Расположим боксы внутри flex-контейнера:

<div class="container container--flex">
  <div class="box">Box</div>
  <div class="box">Box</div>
  <div class="box">Box</div>
  <div class="box">Box</div>
  <div class="box">Box</div>
  <div class="box">Box</div>
</div>

Контейнеру присвоим свойство display со значением flex:

.container--flex {
  display: flex;
}

Боксы будут располагаться по горизонтали слева — направо по умолчанию:

Основы и термины CSS Flexbox

Flexbox не является свойством. Это встроенный модуль CSS, который сам имеет множество свойств. Например, свойство flex-direction помогает выравнивать элемент в нужном направлении. Давайте разберемся с некоторыми базовыми терминами CSS flexbox и узнаем, как он работает.

Основные термины CSS Flexbox:

• Flex Container — используется как контейнер для flex-элементом (flex-items). Чтобы сделать контейнер гибким, мы устанавливаем свойство display как flex.
• Главная ось — используется в качестве основной оси для flex-контейнера для выравнивания flex-элементов. Вдоль основной оси выравниваются все flex-элементы. Устанавливается с помощью свойства flex-direction.
• Поперечная ось — всегда перпендикулярна главной оси.
• Основной размер — обозначает ширину и высоту гибкого контейнера, которые зависят от основной оси.
• Перекрестный размер — обозначает ширину и высоту гибких элементов, которые находятся в поперечном измерении.

Давайте более подробно разберем основную ось. Она может иметь следующие направления:

1. Слева направо. flex-direction: row.
2. Справа налево. flex-direction: row-reverse.
3. Снизу вверх. flex-direction: column.
4. Сверху вниз. flex-direction: column-reverse.

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

Как работает CSS Flexbox

• Flexbox работает с сеткой осей, как показано на изображении выше.
• Используя flexbox, мы можем изменить порядок элементов без изменения исходного кода.
• Flexbox помогает контролировать свободное пространство. Если осталось место, то гибкие элементы увеличиваются, чтобы заполнить доступное пространство. Если места не осталось, то flex-элементы сживаются, чтобы предотвратить переполнение.
• Flex-элементы можно располагать в любом направлении.

Свойства для flex-контейнера

В таблице показаны свойства CSS flexbox с их значениями. Вы можете использовать его в качестве справочного материала при работе над проектами.

Отображение flex-элементов

Чтобы создать flex-контейнер мы задаем элементу следующее свойство:

display: flex;

Давайте рассмотрим на простом примере создание навигационного меню:

HTML:

<div class="container">
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Prices</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

CSS:

.menu {
  display: flex;
}

.menu > li {
  margin-right: 10px;
}

Получим результат:

Как мы говорили ранее, свойство display со значением flex упорядочивает flex-элемент в ряд слева направо.

Flex-direction

CSS flex-direction используется для установки ориентации и направления flex-элементов. Свойство flex-direction может иметь четыре значения — row (слева направо), row-reverse (справа налево), column (сверху вниз), column-reverse (снизу вверх).

Если явно не задать свойство flex-direction, то будет использовано значение row.

Синтаксис:

flex-direction: column;

В качестве примера зададим боксам  направление row-reverse.

HTML:

<div class="container container--row-reverse">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
  <div class="box">Box 5</div>
  <div class="box">Box 6</div>
</div>

CSS:

.container--row-reverse {
  display: flex;
  flex-direction: row-reverse;
}

Получим результат:

Flex-wrap

Flex-wrap определяет должны ли переноситься flex-элементы на новую строку.

Синтаксис:

flex-wrap: wrap;

Свойство flex-wrap принимает следующие значения:

Мы используем flex-wrap для упорядочивания flex-элементов в соответствии с размером контейнера.

Пример:

HTML:

<div class="container container--wrap">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
  <div class="box">Box 5</div>
  <div class="box">Box 6</div>
  <div class="box">Box 7</div>
  <div class="box">Box 8</div>
</div>

CSS:

.container--wrap {
  display: flex;
  flex-wrap: wrap;
}

Видим, что два крайних бокса перенеслись на новую строку:

Justify-content

Justify-content позволяет выравнивать flex-элементы по главной оси. Он определяет распределение пространства вокруг flex-элементов вдоль главной оси flex-контейнера.

Синтаксис:

display: flex;

Свойство justify-content может принимать следующие значения:

В качестве примера расположим боксы равномерно вдоль контейнера:

HTML:

<div class="container container--space-between">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
  <div class="box">Box 5</div>
</div>

CSS:

.container--space-between {
  display: flex;
  justify-content: space-between;
}

В результате получим:

Флекс-элементы располагаются с интервалом между строками вдоль главной оси.

Align-items

Свойство align-items используется для выравнивания flex-элементов вдоль поперечной оси

Синтаксис:

align-items: center;

Свойство align-items может принимать следующие значения:

В качестве примера выравниваем наши элементы по центру высоту:

HTML:

<div class="container container--center">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
  <div class="box">Box 5</div>
</div>

CSS:

.container--center {
  display: flex;
  align-items: center;
  height: 100px;
}

Получаем:

Главная и поперечная ось расположены по умолчанию (так как мы явно не задавали свойство flex-direction). Боксы располагаются по центру высоты, так как поперечная ось направлена сверху вниз.

Stretch — это значение по умолчанию, которое растягивает flex-элементы, чтобы заполнить контейнер. Давайте рассмотрим его также на примере.

CSS:

.container--stretch {
  display: flex;
  align-items: stretch;
  height: 75px;
}

Боксы заполнили по высоте весь контейнер (с учетом отступов).

Align-content

Align-content используется для распределение пространства между элементами вдоль поперечной оси. Действует аналогично justify-content.

Синтаксис:

align-content: space-evenly;

Свойство align-content может принимать следующие значения:

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

HTML:

<div class="container container--space-evenly">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
  <div class="box">Box 5</div>
  <div class="box">Box 6</div>
  <div class="box">Box 7</div>
  <div class="box">Box 8</div>
  <div class="box">Box 9</div>
  <div class="box">Box 10</div>
  <div class="box">Box 11</div>
  <div class="box">Box 12</div>
  <div class="box">Box 13</div>
</div>

CSS:

.container--space-evenly {
  display: flex;
  flex-wrap: wrap;
  align-content: space-evenly;
  width: 300px;
  height: 150px;
  margin-bottom: 50px;
}

Благодаря свойству wrap мы переносим боксы на новую строку. Свободное пространство между ними вдоль поперечной оси распределяется равномерно:

Gap

Свойство gap используется для установки промежутка между строкой (row-gap) и столбцом (column-gap).

Синтаксис:

.container--gap {
  flex-wrap: wrap;
  gap: 20px 10px; /* 20px - строка, 10px - колонка */
  row-gap: 20px;
  column-gap: 10px;
}

Свойство для дочерних flex-элементов

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

Order

Свойство order влияет на порядок элементов. Он применяется только к flex-элементам, а не к flex-контейнеру. Мы можем назначить определенный номер flex-элементу, как показано ниже.

Синтаксис:

.box--order {
  order: 5;
}

Рассмотрим пример:

<div class="container">
  <div class="box" style="order: 5">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
  <div class="box">Box 5</div>
</div>

В данном примере мы помещаем первый бокс на место пятого. А место первого бокса занимает второй:

Мы видим, что можно менять порядок flex-элементов и при этом не затрагивает HTML-разметку.

Flex-grow

Часто возникает такая ситуация, когда остается свободное пространство во flex-контейнере и его необходимо распределить между flex-элементами. Свойство flex-grow позволяет увеличить размер flex-элемента при наличии пространства во flex-контейнере.

Синтаксис:

.box--flex-grow {
  flex-grow: 1;
}

Число, которые мы указываем для flex-grow обозначает коэффициент расширения.

Давайте рассмотрим следующий пример:

<div class="container container--flex">
  <div class="box" style="flex-grow: 2">Box 1</div>
  <div class="box" style="flex-grow: 1">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
  <div class="box">Box 5</div>
</div>

Во flex-контейнере есть пять боксов, которые распределены равномерно. При этом контейнер довольно большой и остается свободное пространство в конце. Третий, четвертый и пятый боксы не будут расширяться и займут столько места, сколько им надо. Первый бокс займет в два раза больше места чем второй. Так как у него установлен коэффициент расширения 2.

Flex-shrink

Свойство flex -shrink помогает уменьшить размер, если размер flex-элемент больше, чем flex-контейнер. Он работает противоположно flex-grow. Значение CSS flex-shrink по умолчанию равно 1.

Синтаксис:

.box--flex-shrink {
  flex-shrink: 1;
}

Flex-basis

Flex-basis используется для определения начального размера flex-элемента.

Синтаксис:

.box--flex-basis {
  flex-basis: 100px;
}

Пример:

<div class="container container--flex">
  <div class="box" style="flex-basis: 100px">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
  <div class="box">Box 5</div>
</div>

Мы задали первому элементу начальный размер 100 пикселей.

Flex

Чтобы использовать flex-grow, flex-shrink и flex-basis, мы используем свойство CSS flex, которое является сокращенным свойством. Порядок будет такой:

1. flex-grow
2. flex-shrink
3. flex-basis

Синтаксис:

.box--flex {
  flex: 1 0 200px; /* grow - shrink - basis */
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 200px;
}

Align-self

Чтобы выровнять flex-элемент во flex-контейнере, мы используем свойство align-self. Его значения совпадают со свойством align-items в родительском классе. Мы можем переопределить выравнивание отдельного элемента.

Синтаксис:

.box--align-self {
  align-self: flex-start;
}

Пример:

<div class="container container--flex">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
  <div class="box">Box 4</div>
  <div class="box" style="align-self: flex-end">Box 5</div>
</div>

В этом примере мы выравниваем располагаем пятый бокс снизу:

Подведем итоги

1. CSS Flexbox помогает пользователю создавать гибкие и адаптивные макеты, совместимые со всеми устройствами.
2. Flex-контейнер используется для размещения элементов как по горизонтали, так и по вертикали.
3. Чтобы применить свойства flexbox ко всему контейнеру, у нас есть родительские свойства flexbox, такие как CSS display, align-items и т. д.
4. Чтобы применить свойства flexbox индивидуально к flex-элементу или дочернему элементу, у нас есть дочерние свойства flexbox, такие как flex, flex-basis и т. д.