Flex руководство на русском

Время на прочтение
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).

Предисловие

Модуль 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 место для отслеживания всех ошибок, поэтому я думаю, что лучше всего просто оставить ссылку. 

<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 (CSS Flexible Box Layout) – это модель макета, которая позволяет упорядочивать элементы во flex-контейнере. Объекты внутри контейнера называются flex-элементами. Они равномерно распределяются по контейнеру, меняя свои размеры и позиции согласно установленным правилам упорядочивания и размещения в пространстве. С помощью Flexbox можно упорядочить разные по величине элементы в строках или столбцах так, чтобы более крупные объекты занимали больше места, чем объекты меньшего размера.

Где найти настройки Flexbox

Они находятся в панели «Адаптивные» на вкладке Flexbox.

Как пользоваться Flexbox

Установите флажок Использовать Flexbox. Текущий родительский элемент станет flex-контейнером, а на панели «Адаптивные» появятся свойства Flexbox.

Все прямые дочерние объекты внутри контейнера теперь будут flex-элементами, за исключением вспомогательных слоев. Flex-элементы будут упорядочены по главной оси. Вы можете сделать ее горизонтальной или вертикальной, а также выбрать направление, в котором на ней будет размещаться контент. Поскольку ориентацию и направление во Flexbox можно менять, свойства принимают такие значения, как flex-start и flex-end вместо top, bottom, left или right.

Направление

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

Значение	Поведение	Главная ось
row	Flex-элементы выстраиваются в строки в направлении написания и чтения текста (слева направо для таких языков, как русский).	Горизонтальная
row-reverse	Flex-элементы выстраиваются в строки в направлении, противоположном написанию и чтению текста (справа налево для таких языков, как русский).	Горизонтальная
column	Flex-элементы выстраиваются в столбцы в направлении потока контента (как правило, сверху вниз).	Вертикальная
column-reverse	Flex-элементы выстраиваются в столбцы в направлении, противоположном потоку контента (как правило, снизу вверх).	Вертикальная

Интервал

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

Выравнивание

Это свойство позволяет устанавливать порядок размещения flex-элементов на главной оси. Настройка свойства доступна при использовании стандартного интервала.

Значение	Поведение
flex-start	Flex-элементы размещаются в начале строки или столбца.
flex-end	Flex-элементы размещаются в конце строки или столбца.
center	Flex-элементы размещаются в середине главной оси.
space-between	Flex-элементы равномерно распределяются по главной оси так, чтобы первый был в начале контейнера, а последний – в конце.
space-around	Flex-элементы равномерно распределяются по главной оси, при этом первый и последний располагаются у границ контейнера с отступом от края в половину интервала.
space-evenly	Flex-элементы равномерно распределяются по главной оси с одинаковым интервалом, который также сохраняется для первого и последнего элементов.

Выравнивание по поперечной оси

Это свойство позволяет управлять размещением flex-элементов на поперечной оси текущей строки или столбца.

Значение	Поведение
flex-start	Flex-элементы располагаются в начале поперечной оси.
flex-end	Flex-элементы располагаются в конце поперечной оси.
center	Flex-элементы располагаются в середине поперечной оси.
stretch	Flex-элементы растягиваются и занимают всю поперечную ось.
baseline	Flex-элементы располагаются на поперечной оси так, что их базовые линии находятся на одном уровне.

Перенос

Это свойство позволяет включать и отключать перенос объектов внутри контейнера. Настройка свойства доступна при использовании стандартного интервала.

Выравнивание при переносе

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

Значение	Поведение
flex-start	Строки или столбцы располагаются в начале контейнера без расстояния между ними.
flex-end	Строки или столбцы располагаются в конце контейнера без расстояния между ними.
center	Строки или столбцы располагаются в середине поперечной оси.
stretch	Строки или столбцы растягиваются по поперечной оси так, чтобы заполнить все доступное пространство, за исключением случаев, когда для них установлена фиксированная высота.
space-between	Строки или столбцы равномерно распределяются по поперечной оси, при этом первая и последняя строка или столбец располагается в начале и конце контейнера соответственно.
space-around	Строки или столбцы равномерно распределяются по поперечной оси, при этом отступ от границ контейнера составляет половину интервала.

Интервал между дочерними элементами

Это свойство позволяет устанавливать расстояние в пикселях между двумя элементами в flex-контейнере, когда вы используете фиксированный интервал.

Интервал от границ контейнера

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

Порядок дочерних элементов

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

Переставлять элементы можно также прямо в рабочей области.

Свойства дочерних элементов во Flexbox

У flex-элементов тоже есть свойства. Чтобы посмотреть и изменить Flexbox-настройки элемента, нажмите на него.

Flex-элементы могут растягиваться и сжиматься только с учетом минимальной и максимальной ширины и высоты. Свойства left и top у flex-элементов отключены, так как они определяются настройками Flexbox, а вот свойства преобразования можно использовать, чтобы смещать элементы.

Выравнивание по поперечной оси

Это свойство переопределяет выравнивание по поперечной оси, заданное для контейнера по умолчанию.

Фактор растяжения flex-элемента

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

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

Если сумма факторов растяжения flex-элементов в ряду меньше 1, то такие элементы могут не занять все свободное место.

Flex-элемент с фактором растяжения 0 увеличиваться не будет.

Фактор сжатия flex-элемента

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

Например, если в строке три flex-элемента с факторами сжатия 1, 1 и 2, последний из элементов сожмется сильнее, чем два других по отдельности. Фактор сжатия учитывает размер flex-элемента.

Flex-элемент с фактором сжатия 0 сжиматься не будет.

Эта информация оказалась полезной?

Как можно улучшить эту статью?