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

 

display

Здесь текст

.parent {
  display: flex;
}
Copied!

Здесь текст

.parent {
  display: inline-flex;
}
Copied!

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

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

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

A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout. For example, floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents. Flex containers form a containing block for their contents exactly like block containers do. The overflow property applies to flex containers.

Flex containers are not block containers, and so some properties that were designed with the assumption of block layout don’t apply in the context of flex layout. In particular: If an element’s specified display is inline-flex, then its display property computes to flex in certain circumstances: the table in CSS 2.1 Section 9.7 is amended to contain an additional row, with inline-flex in the ‘Specified Value’ column and flex in the ‘Computed Value’ column.

Applies to: all elements.

flex
This value causes an element to generate a block-level flex container box.
inline-flex
This value causes an element to generate an inline-level flex container box.

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
Главная ось располагается вертикально, но меняется положение начальной и конечной точек и ось направлена снизу вверх.

The flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis. This determines the direction in which flex items are laid out.

Note: The reverse values do not reverse box ordering: like writing-mode and direction , they only change the direction of flow. Painting order, speech order, and sequential navigation orders are not affected.

Applies to: flex containers.

row
The flex container’s main axis has the same orientation as the inline axis of the current writing mode. The main-start and main-end directions are equivalent to the inline-start and inline-end directions, respectively, of the current writing mode.
row-reverse
Same as row, except the main-start and main-end directions are swapped.
column
The flex container’s main axis has the same orientation as the block axis of the current writing mode. The main-start and main-end directions are equivalent to the block-start and block-end directions, respectively, of the current writing mode.
column-reverse
Same as column, except the main-start and main-end directions are swapped.

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.

The flex-wrap property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.

For the values that are not wrap-reverse, the cross-start direction is equivalent to either the inline-start or block-start direction of the current writing mode (whichever is in the cross axis) and the cross-end direction is the opposite direction of cross-start. When flex-wrap is wrap-reverse, the cross-start and cross-end directions are swapped.

Applies to: flex containers.

Initial: nowrap.

nowrap
The flex container is single-line.
wrap
The flex container is multi-line.
wrap-reverse
Same as wrap.

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.

The flex-flow property is a shorthand for setting the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes.

Applies to: flex containers.

Initial: 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.

The order property controls the order in which children of a flex container appear within the flex container, by assigning them to ordinal groups. It takes a single <integer> value, which specifies which ordinal group the flex item belongs to.

A flex container lays out its content in order-modified document order, starting from the lowest numbered ordinal group and going up. Items with the same ordinal group are laid out in the order they appear in the source document. This also affects the painting order , exactly as if the flex items were reordered in the source document.

Applies to: flex items.

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

The justify-content property aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved. Typically it helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

Applies to: flex containers.

Initial: flex-start.

flex-start
Flex items are packed toward the start of the line. The main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, and each subsequent flex item is placed flush with the preceding item.
flex-end
Flex items are packed toward the end of the line. The main-end margin edge of the last flex item is placed flush with the main-end edge of the line, and each preceding flex item is placed flush with the subsequent item.
center
Flex items are packed toward the center of the line. The flex items on the line are placed flush with each other and aligned in the center of the line, with equal amounts of space between the main-start edge of the line and the first item on the line and between the main-end edge of the line and the last item on the line. (If the leftover free-space is negative, the flex items will overflow equally in both directions.)
space-between
Flex items are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to flex-start. Otherwise, the main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, the main-end margin edge of the last flex item on the line is placed flush with the main-end edge of the line, and the remaining flex items on the line are distributed so that the spacing between any two adjacent items is the same.
space-around
Flex items are evenly distributed in the line, with half-size spaces on either end. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to center. Otherwise, the flex items on the line are distributed such that the spacing between any two adjacent flex items on the line is the same, and the spacing between the first/last flex items and the flex container edges is half the size of the spacing between flex items.
space-evenly
Flex items are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to center. Otherwise, the flex items on the line are distributed such that the spacing between each one is the same.

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
Флексы растягиваются таким образом, чтобы занять всё доступное пространство контейнера.

Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container’s items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items. (For anonymous flex items, align-self always matches the value of align-items on their associated flex container.)

If either of the flex item’s cross-axis margins are align-self has no effect.

On absolutely positioned elements, a value of auto computes to itself. On all other elements, a value of auto for align-self computes to the value of align-items on the element’s parent, or stretch if the element has no parent. The alignments are defined as:

Applies to: flex containers.

Initial: stretch.

flex-start
The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.
flex-end
The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line.
center
The flex item’s margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.)
baseline
If the flex item’s inline axis is the same as the cross axis, this value is identical to flex-start. Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line.
Stretch
If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched. Its used value is the length necessary to make the cross size of the item’s margin box as close to the same size as the line as possible, while still respecting the constraints imposed by min-height/min-width/max-height/max-width. Note: If the flex container’s height is constrained this value may cause the contents of the flex item to overflow the item.The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.

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
Элемент растягивается таким образом, чтобы занять всё свободное пространство контейнера по поперечной оси.

Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container’s items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items. (For anonymous flex items, align-self always matches the value of align-items on their associated flex container.)

If either of the flex item’s cross-axis margins are align-self has no effect.

On absolutely positioned elements, a value of auto computes to itself. On all other elements, a value of auto for align-self computes to the value of align-items on the element’s parent, or stretch if the element has no parent. The alignments are defined as:

Applies to: flex items.

Initial: auto.

flex-start
The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.
flex-end
The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line.
center
The flex item’s margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.)
baseline
If the flex item’s inline axis is the same as the cross axis, this value is identical to flex-start. Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line.
Stretch
If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched. Its used value is the length necessary to make the cross size of the item’s margin box as close to the same size as the line as possible, while still respecting the constraints imposed by min-height/min-width/max-height/max-width. Note: If the flex container’s height is constrained this value may cause the contents of the flex item to overflow the item.The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.

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
Строки равномерно растягиваются, заполняя свободное пространство.

The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect on a single-line flex container. Values have the following meanings:

Note: Only multi-line flex containers ever have free space in the cross-axis for lines to be aligned in, because in a single-line flex container the sole line automatically stretches to fill the space.

Applies to: flex containers.

Initial: stretch.

flex-start
Lines are packed toward the start of the flex container. The cross-start edge of the first line in the flex container is placed flush with the cross-start edge of the flex container, and each subsequent line is placed flush with the preceding line.
flex-end
Lines are packed toward the end of the flex container. The cross-end edge of the last line is placed flush with the cross-end edge of the flex container, and each preceding line is placed flush with the subsequent line.
center
Lines are packed toward the center of the flex container. The lines in the flex container are placed flush with each other and aligned in the center of the flex container, with equal amounts of space between the cross-start content edge of the flex container and the first line in the flex container, and between the cross-end content edge of the flex container and the last line in the flex container. (If the leftover free-space is negative, the lines will overflow equally in both directions.)
space-between
Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to flex-start. Otherwise, the cross-start edge of the first line in the flex container is placed flush with the cross-start content edge of the flex container, the cross-end edge of the last line in the flex container is placed flush with the cross-end content edge of the flex container, and the remaining lines in the flex container are distributed so that the spacing between any two adjacent lines is the same.
space-around
Lines are evenly distributed in the flex container, with half-size spaces on either end. If the leftover free-space is negative this value is identical to center. Otherwise, the lines in the flex container are distributed such that the spacing between any two adjacent lines is the same, and the spacing between the first/last lines and the flex container edges is half the size of the spacing between flex lines.
space-evenly
Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to center. Otherwise, the lines in the flex container are distributed such that the spacing between every flex line is the same.
stretch
Lines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to flex-start. Otherwise, the free-space is split equally between all of the lines, increasing their cross size.

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.

The flex-grow property sets the flex grow factor to the provided <number>. Negative numbers are invalid.

Applies to: flex items.

Initial: 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.

The flex-shrink property sets the flex shrink factor to the provided <number>. Negative numbers are invalid.

Applies to: flex items.

Initial: 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.

The flex-basis property sets the flex basis. It accepts the same values as the width and height property, plus content.

For all values other than auto and content (defined above), flex-basis is resolved the same way as width in horizontal writing modes , except that if a value would resolve to auto for width, it instead resolves to content for lex-basis. For example, percentage values of flex-basis are resolved against the flex item’s containing block (i.e. its flex container); and if that containing block’s size is indefinite, the used value for flex-basis is content. As another corollary, flex-basis determines the size of the content box, unless otherwise specified such as by box-sizing.

Applies to: flex items.

Initial: auto.