Содержание

Шпаргалка по Flexbox CSS

Шпаргалка по Flexbox CSS

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

display

flex
inline-flex

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


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

Свойства контейнера

flex-direction

row
row-reverse
column
column-reverse

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

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


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

flex-wrap

nowrap
wrap
wrap-reverse

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

Применяется к: flex контейнерам.
Значение по умолчанию: nowrap.


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

flex-flow

row nowrap
column-reverse
column wrap
row-reverse wrap-reverse

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

Применяется к: flex контейнерам.
Значение по умолчанию: row nowrap.

justify-content

flex-start
flex-end
center
space-between
space-around
space-evenly

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

Применяется к: flex контейнерам.
Значение по умолчанию: flex-start.


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

align-items

flex-start
flex-end
center
baseline
stretch

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

Применяется к: flex контейнерам.
Значение по умолчанию: stretch.


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

align-content

flex-start
flex-end
center
space-between
space-around
space-evenly
stretch

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

Применяется к: flex контейнеру.
Значение по умолчанию: stretch.


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

Свойства элементов

align-self

flex-start
flex-end
center
baseline
stretch

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

Применяется кo: flex элементам.
Значение по умолчанию: auto.


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

flex-grow

0
1

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

Применяется к: flex элементам.
Значение по умолчанию: 0.

flex-shrink

0
1

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

Применяется к: flex элементам.
Значение по умолчанию: 1.

flex-basis

30%
50%
content

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

Применяется к: flex элементам.
Значение по умолчанию: auto.

flex

flex - это сокращённое свойство, определяющее способность гибкого элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. Это свойство устанавливает flex-grow, flex-shrink и flex-basis.

Применяется к: flex-элементам, в том числе в потоке микроэлементов
Значение по умолчанию: как и у каждого из подсвойств этого свойства:

flex-grow: 0
flex-shrink: 1
flex-basis: auto

Примеры синтаксиса:

/* 0 0 auto */
flex: none;
 
/* Одно значение, число без единиц: flex-grow */
flex: 2;
 
/* Одно значение, ширина/высота: flex-basis */
flex: 10em;
flex: 30%;
flex: min-content;
 
/* Два значения: flex-grow | flex-basis */
flex: 1 30px;
 
/* Два значения: flex-grow | flex-shrink */
flex: 2 2;
 
/* Три значения: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
 
/* Глобальные значения */
flex: inherit;
flex: initial;
flex: unset;

order

-1
0
1

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

Применяется к: flex элементам.
Значение по умолчанию: 0.