# Шпаргалка по 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. ### 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 Примеры синтаксиса: ```css /* 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.