Шпаргалка по FLEXBOX

Направление расположение flex-элементы в flex-контейнере определяется посредством двух осей:

Элементы в контейнере могут располагаться по горизонтали в виде строки и по вертикали в виде столбца. В зависимости от типа расположения будет меняться и центральная ось. Если расположение в виде строки, то центральная ось направлена горизонтально слева направо. Если расположение в виде столбца, то центральная ось направлена вертикально сверху вниз.

Контейнер flexbox

display (свойства флекс-контейнера)

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

Свойство display со значением inline-flex, практически аналогичное предыдущему значению, за тем исключением, что снаружи флекс-контейнер будет вести себя как строчный элемент.

Назначение

Запуск flexbox

Здесь текст
.parent {
  display: flex;
}
Здесь текст
.parent {
  display: inline-flex;
}

flex-direction направление элементов по главной оси (свойства флекс-контейнера)

Свойство flex-direction задаёт направление основных осей в контейнере и тем самым определяет положение элементов в контейнере. Возможные значения:

  • row значение по умолчанию, при котором элементы располагаются в виде строки слева направо
  • row-reverse элементы также располагаются в виде стоки только в обратном порядке справа налево
  • column элементы располагаются в столбик сверху вниз
  • column-reverse элементы располагаются в столбик в обратном порядке снизу вверх

Назначение

Направление укладки элементов по осям

.parent {
  display: flex;
  flex-direction: row;
}
.parent {
  display: flex;
  flex-direction: row-reverse;
}
.parent {
  display: flex;
  flex-direction: column;
}
.parent {
  display: flex;
  flex-direction: column-reverse;
}

flex-wrap отображение элементов в ряд или с переносом (свойства флекс-контейнера)

Свойство flex-wrap определяет, будет ли flex-контейнер размещать в несколько рядов элементы в случае если его размеры недостаточны, чтобы вместить в один ряд все элементы. Возможные значения:

  • nowrap значение по умолчанию, которое определяет flex-контейнер, где все элементы раполагаются в одну строку, при расположении в виде строк. Или в один столбец, при расположении в столбик
  • wrap если элементы не помещаются во flex-контейнер, то создает дополнительные ряды в контейнере для размещения элементов. При расположении в виде строки содаются дополнительные строки, а при расположении в виде столбца добавляются дополнительные столбцы
  • wrap-reverse то же самое, что и значение wrap, только элементы располагаются в обратном порядке

Назначение

Расположение элементов в одну строку или в несколько

.parent {
  display: flex;
  flex-wrap: nowrap;
}
.child {
  width: 50%;
}
.parent {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
}
.child {
  width: 50%;
}
.parent {
  display: flex;
  flex-wrap: wrap-reverse;
  height: 100%;
}
.child {
  width: 50%;
}

flex-flow порядок элементов (свойства флекс-контейнера)

Шорткат flex-flow для записи значений свойств flex-direction и flex-wrap.

Назначение

Сокращенная запись для свойств flex-direction и flex-wrap

.parent {
  display: flex;
  flex-flow: row nowrap;
}
.parent {
  display: flex;
  flex-flow: column-reverse;
}
.parent {
  display: flex;
  flex-flow: column wrap;
  height: 100%;
}
.child {
  width: 40%;
  height: 40%;
}
.parent {
  display: flex;
  flex-flow: row-reverse wrap-reverse;
  height: 100%;
}
.child {
  width: 40%;
  height: 40%;
}

align-content выравнивание строк и столбцов (свойства флекс-контейнера)

Свойство align-content управляет выравниванием рядов, строк и столбцов во flex-контейнере и поэтому применяется, если свойство flex-wrap имеет значение wrap или wrap-reverse. Возможные значения:

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

Назначение

Выравнивание строк и столбцов

.parent {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 100%;
}
.child {
  width: 30%;
}
.parent {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  height: 100%;
}
.child {
  width: 30%;
}
.parent {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  height: 100%;
}
.child {
  width: 30%;
}
.parent {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  height: 100%;
}
.child {
  width: 30%;
}
.parent {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  height: 100%;
}
.child {
  width: 30%;
}
.parent {
  display: flex;
  flex-wrap: wrap;
  align-content: space-evenly;
  height: 100%;
}
.child {
  width: 30%;
}
.parent {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  height: 100%;
}
.child {
  width: 30%;
}

justify-content выравнивание по главной оси (свойства флекс-контейнера)

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

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

Назначение

Выравнивание flex-элементов

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

align-items выравнивание по поперечной оси (свойства флекс-контейнера)

Свойство align-items выравнивает элементы вдоль оси, при расположении в виде строки по вертикали, при расположении в виде столбца по горизонтали. Возможные значения:

  • stretch значение по умолчанию, при котором flex-элементы растягиваются по всей высоте, при расположении в строку. Или по всей ширине, при расположении в столбик flex-контейнера
  • flex-start элементы выравниваются по верхнему краю, при расположении в строку. Или по левому краю, при расположении в столбик flex-контейнера
  • flex-end элементы выравниваются по нижнему краю, при расположении в строку. Или по правому краю, при расположении в столбик flex-контейнера
  • center элементы выравниваются по центру flex-контейнера
  • baseline элементы выравниваются в соответствии со своей базовой линией

Назначение

Выравнивание flex-элементов

.parent {
  display: flex;
  align-items: flex-start;
  height: 100%; }
.parent {
  display: flex;
  align-items: flex-end;
  height: 100%; }
.parent {
  display: flex;
  align-items: center;
  height: 100%; }
.parent {
  display: flex;
  align-items: baseline;
  height: 100%; }
.parent {
  display: flex;
  align-items: stretch;
  height: 100%; }

order порядок flex-элементов (свойства флекс-элемента)

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

Назначение

Определяет порядок flex-элементов внутри контейнера

.parent {
  display: flex;
  align-items: flex-start;
}
.child-active {
  order: -1;
}
.parent {
  display: flex;
  align-items: flex-start;
}
.child-active {
  order: 0;
}
.parent {
  display: flex;
  align-items: flex-start;
}
.child-active {
  order: 1;
}

align-self выравнивание одного элемента (свойства флекс-элемента)

Свойство align-self выравнивает flex-элементы текущей строки. При расположении в виде строки по вертикали, при расположении в виде столбца по горизонтали

Назначение

Переопределяет выравнивание flex-элемента

.parent {
display: flex;
  height: 100%;
}
.child-active {
  align-self: flex-start;
}
.parent {
display: flex;
  height: 100%;
}
.child-active {
  align-self: flex-end;
}
.parent {
display: flex;
  height: 100%;
}
.child-active {
  align-self: center;
}
.parent {
display: flex;
  height: 100%;
}
.child-active {
  align-self: baseline;
}
.parent {
display: flex;
  height: 100%;
}
.child-active {
  align-self: stretch;
}

flex-grow определяет, как flex-элемент будет увеличиваться относительно других flex-элементов во flex-контейнере (свойства флекс-элемента)

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

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

Назначение

Устанавливает фактор растягивания flex-элемента

.parent {
  display: flex;
}
.child-active {
  flex-grow: 0;
}
.parent {
  display: flex;
}
.child-active {
  flex-grow: 1;
}

flex-shrink определяет, как flex-элемент будет уменьшаться относительно других flex-элементов во flex-контейнере (свойства флекс-элемента)

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

Назначение

Устанавливает фактор сужения flex-элемента

.parent {
display: flex;
}
.child {
  width: 40%;
}
.child-active {
  flex-shrink: 0;
}
.parent {
display: flex;
}
.child {
  width: 40%;
}
.child-active {
  flex-shrink: 1;
}

flex-basis определяет начальный размер flex-элемента (свойства флекс-элемента)

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

  • auto начальный размер flex-элемента устанавливается автоматически
  • content размер flex-элемента определяется по его содержимому, в то же время это значение поддерживается не всеми современными браузерами, поэтому его пока стоит избегать
  • числовое значение мы можем установить конкретное числовое значение для размеров элемента

Назначение

Устанавливает размер flex-элемента

.parent {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
.child-active {
  flex-basis: 30%;
}
.parent {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
.child-active {
  flex-basis: 50%;
}
.parent {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
.child-active {
  flex-basis: content;
}