Вся документация по свойству flex находится на официальном сайте.

 

display

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

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

Применяется ко: всем элементам.

flex
Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели.
inline-flex
Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели.

flex-direction

.parent {
  display: flex;
  flex-direction: row;
  height: 100%;
}Copied!
.parent {
  display: flex;
  flex-direction: row-reverse;
  height: 100%;
}Copied!
.parent {
  display: flex;
  flex-direction: column;
  height: 100%;
}Copied!
.parent {
  display: flex;
  flex-direction: column-reverse;
  height: 100%;
}Copied!

Свойство flex-direction задаёт направление основных осей в контейнере и тем самым определяет положение флексов в контейнере. На само направление также влияет значение атрибута dir у контейнера.

Применяется к: flex контейнерам.

row
Главная ось направлена так же, как и ориентация текста, по умолчанию слева направо. Если значение dir задано как rtl, то направление оси идёт справа налево.
row-reverse
Похоже на значение row, но меняются местами начальная и конечная точки и главная ось направлена справа налево. Если значение dir задано как rtl, то направление оси идёт слева направо.
column
Главная ось располагается вертикально и направлена сверху вниз.
column-reverse
Главная ось располагается вертикально, но меняется положение начальной и конечной точек и ось направлена снизу вверх.

flex-wrap

.parent {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  height: 100%;
}
.child {
  width: 40%;
}Copied!
.parent {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  height: 100%;
}
.child {
  width: 40%;
}Copied!
.parent {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap-reverse;
  height: 100%;
}
.child {
  width: 40%;
}Copied!

Свойство flex-wrap Указывает, следует ли флексам располагаться в одну строку или можно занять несколько строк. Если перенос строк допускается, то свойство также позволяет контролировать направление, в котором выкладываются строки.

Применяется к: flex контейнерам.

Значение по умолчанию: nowrap.

nowrap
Флексы выстраиваются в одну линию.
wrap
Флексы выстраиваются в несколько строк, их направление задаётся свойством flex-direction.
wrap-reverse
Флексы выстраиваются в несколько строк, в направлении, противоположном flex-direction.

flex-flow

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

Свойство flex-flow является сокращённым свойством для отдельных свойств flex-direction и flex-wrap.

Применяется к: flex контейнерам.

Значение по умолчанию: row nowrap.

order

.parent {
  display: flex;
  align-items: flex-start;
  height: 100%;
}
.child-active {
  order: -1;
}Copied!
.parent {
  display: flex;
  align-items: flex-start;
  height: 100%;
}
.child-active {
  order: 0;
}Copied!
.parent {
  display: flex;
  align-items: flex-start;
  height: 100%;
}
.child-active {
  order: 1;
}Copied!

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

Применяется к: flex элементам.

Значение по умолчанию: 0.

justify-content

.parent {
  display: flex;
  justify-content: flex-start;
  height: 100%;
}Copied!
.parent {
  display: flex;
  justify-content: flex-end;
  height: 100%;
}Copied!
.parent {
  display: flex;
  justify-content: center;
  height: 100%;
}Copied!
.parent {
  display: flex;
  justify-content: space-between;
  height: 100%;
}Copied!
.parent {
  display: flex;
  justify-content: space-around;
  height: 100%;
}Copied!
.parent {
  display: flex;
  justify-content: space-evenly;
  height: 100%;
}Copied!

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

Применяется к: flex контейнерам.

Значение по умолчанию: flex-start.

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

align-items

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

Свойство align-items выравнивает флекс-элементы внутри контейнера в перпендикулярном направлении.

Применяется к: flex контейнерам.

Значение по умолчанию: stretch.

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

align-self

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

Свойство align-self выравнивает флекс-элементы текущей строки, переписывая значение align-items.

Применяется кo: flex элементам.

Значение по умолчанию: auto.

flex-start
Элемент выравнивается в начале поперечной оси контейнера.
flex-end
Элемент выравнивается в конце поперечной оси контейнера.
center
Элемент выравнивается по центральной линии на поперечной оси.
baseline
Элемент выравнивается по базовой линии текста.
Stretch
Элемент растягивается таким образом, чтобы занять всё свободное пространство контейнера по поперечной оси.

align-content

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

Свойство align-content задаёт тип выравнивания строк внутри flex контейнера по поперечной оси при наличии свободного пространства.

Применяется к: flex контейнеру.

Значение по умолчанию: stretch.

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

flex-grow

.parent {
  display: flex;
  height: 100%;
}
.child-active {
  flex-grow: 0;
}Copied!
.parent {
  display: flex;
  height: 100%;
}
.child-active {
  flex-grow: 1;
}Copied!

Свойство flex-grow задает коэффициент роста flex для заданного числа. Отрицательное значение не валидно.

Применяется к: flex элементам.

Значение по умолчанию: 0.

flex-shrink

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

Свойство flex-shrink задает коэффициент сжатия flex с заданным числом. Отрицательное значение не валидно.

Применяется к: flex элементам.

Значение по умолчанию: 1.

flex-basis

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

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

Применяется к: flex элементам.

Значение по умолчанию: auto.