Это старая версия документа!
# Шпаргалка по Flexbox CSS
Вся документация по свойству flex находится на [официальном сайте](https://www.w3.org/TR/css-flexbox-1/#flex-containers).
## 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. ## order
- -1
- 0
- 1
Свойство order определяет порядок вывода флексов внутри флекс-контейнера. Элементы располагаются согласно значениям свойства order от меньшего к большему. При равных значениях order элементы выводятся в том порядке, в каком они появляются в исходном коде.
Применяется к: flex элементам. Значение по умолчанию: 0. ## 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-self
- flex-start
- flex-end
- center
- baseline
- stretch
Свойство align-self выравнивает флекс-элементы текущей строки, переписывая значение align-items.
Применяется кo: flex элементам. Значение по умолчанию: auto.
| 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 | Строки равномерно растягиваются, заполняя свободное пространство. |
## 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.