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