Flexbox CSS - Это новая технология, которая уже имеет достаточно широкую поддержку браузеров. Flexbox предоставляет инструменты для быстрого создания сложных, гибких макетов, и функции, которые были сложны в традиционных методах CSS. В этой статье объясняются все основы данной технологии.
CSS Flexbox позволяет создать адаптивный дизайн намного проще, чем с использованием Float и позиционирования. Flexbox можно использовать как для CSS разметки целой страницы, так и её отдельных блоков.
Элементы в flexbox могут располагаться вдоль основной оси (от main-start до main-end) или же вдоль поперечной оси (от cross-start до cross-end).
Main axis — основная ось flex контейнера, вдоль которой располагаются flex элементы. Обратите внимание, что ей необязательно быть горизонтальной, все зависит от свойства flex-direction, о котором вы прочитаете позже.
Main-start | main-end — Flex элементы расположены в рамках контейнера, начиная от main-start и заканчивая main-end.
Main-size — высота или ширина flex элемента, что зависит от того, в каком направлении идёт основная ось.
Cross axis — ось перпендикулярная главной оси, называется поперечной. Её направление зависит от направления главной оси.
Cross-start | cross-end — flex линии, заполненные элементами и расположенные в контейнере от cross-start до cross-end.
Cross-size — Ширина или высота flex-элемента, в зависимости от направления главной оси.
display
Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.
Применяется ко: всем элементам.
flex - Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели.
inline-flex -Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели.
flex-direction
Свойство flex-direction задаёт направление основных осей в контейнере и тем самым определяет положение флексов в контейнере. На само направление также влияет значение атрибута dir у контейнера.
Применяется к: flex контейнерам.
row - Главная ось направлена так же, как и ориентация текста, по умолчанию слева направо. Если значение dir задано как rtl, то направление оси идёт справа налево.
row-reverse - Похоже на значение row, но меняются местами начальная и конечная точки и главная ось направлена справа налево. Если значение dir задано как rtl, то направление оси идёт слева направо.
column - Главная ось располагается вертикально и направлена сверху вниз.
column-reverse - Главная ось располагается вертикально, но меняется положение начальной и конечной точек и ось направлена снизу вверх.
flex-wrap
Свойство flex-wrap Указывает, следует ли флексам располагаться в одну строку или можно занять несколько строк. Если перенос строк допускается, то свойство также позволяет контролировать направление, в котором выкладываются строки.
Применяется к: flex контейнерам. Значение по умолчанию: nowrap.
nowrap - Флексы выстраиваются в одну линию.
wrap - Флексы выстраиваются в несколько строк, их направление задаётся свойством flex-direction.
wrap-reverse - Флексы выстраиваются в несколько строк, в направлении, противоположном flex-direction.
flex-flow
Свойство flex-flow является сокращённым свойством для отдельных свойств flex-direction и flex-wrap.
Применяется к: flex контейнерам. Значение по умолчанию: row nowrap.
order
Свойство order определяет порядок вывода флексов внутри флекс-контейнера. Элементы располагаются согласно значениям свойства order от меньшего к большему. При равных значениях order элементы выводятся в том порядке, в каком они появляются в исходном коде.
Применяется к: flex элементам. Значение по умолчанию: 0.
justify-content
Свойство justify-content определяет, как браузер распределяет пространство вокруг флекс-элементов вдоль главной оси контейнера. Это делается после того, как применяются размеры и автоматические отступы, за исключением ситуации, когда по крайней мере у одного элемента flex-grow больше нуля. При этом не остаётся никакого свободного пространства для манипулирования.
Применяется к: flex контейнерам. Значение по умолчанию: flex-start.
flex-start - Флексы прижаты к началу строки.
flex-end - Флексы прижаты к концу строки.
center - Флексы выравниваются по центру строки.
space-between - Флексы равномерно распределяются по всей строке. Первый и последний элемент прижимаются к соответствующим краям контейнера.
space-around - Флексы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами.
space-evenly - Флексы распределяются так, что расстояние между любыми двумя соседними элементами, а также перед первым и после последнего, было одинаковым.
align-items
Свойство align-items выравнивает флекс-элементы внутри контейнера в перпендикулярном направлении.
Применяется к: flex контейнерам. Значение по умолчанию: stretch.
flex-start - Флексы выравниваются в начале поперечной оси контейнера.
flex-end - Флексы выравниваются в конце поперечной оси контейнера.
center - Флексы выравниваются по линии поперечной оси.
baseline - Флексы выравниваются по их базовой линии.
Stretch - Флексы растягиваются таким образом, чтобы занять всё доступное пространство контейнера.
align-self
Свойство align-self выравнивает флекс-элементы текущей строки, переписывая значение align-items.
Применяется кo: flex элементам. Значение по умолчанию: auto.
flex-start - Элемент выравнивается в начале поперечной оси контейнера.
flex-end - Элемент выравнивается в конце поперечной оси контейнера.
center - Элемент выравнивается по центральной линии на поперечной оси.
baseline - Элемент выравнивается по базовой линии текста.
Stretch - Элемент растягивается таким образом, чтобы занять всё свободное пространство контейнера по поперечной оси.
align-content
Свойство align-content задаёт тип выравнивания строк внутри flex контейнера по поперечной оси при наличии свободного пространства.
Применяется к: flex контейнеру.Значение по умолчанию: stretch.
flex-start - Строки располагаются в начале поперечной оси. Каждая следующая строка идёт вровень с предыдущей.
flex-end - Строки располагаются начиная с конца поперечной оси. Каждая предыдущая строка идёт вровень со следующей.
center - Строки располагаются по центру контейнера.
space-between - Строки равномерно распределяются в контейнере и расстояние между ними одинаково.
space-around - Строки равномерно распределяются таким образом, чтобы пространство между двумя соседними строками было одинаковым. Пустое пространство перед первой строкой и после последней строки равно половине пространства между двумя соседними строками.
space-evenly - Строки распределяются равномерно. Пустое пространство перед первой строкой и после последней строки имеет ту же ширину, что и у других строк.
stretch - Строки равномерно растягиваются, заполняя свободное пространство.
flex-grow
Свойство flex-grow задает коэффициент роста flex для заданного числа. Отрицательное значение не валидно.
Применяется к: flex элементам. Значение по умолчанию: 0.
flex-shrink
Свойство flex-shrink задает коэффициент сжатия flex с заданным числом. Отрицательное значение не валидно.
Применяется к: flex элементам. Значение по умолчанию: 1.
flex-basis
Свойство flex-basis определяет основу флекса, которая является начальным размером элемента. Похоже на свойства width и height, к которым добавляется содержимое элемента.
Применяется к: flex элементам.Значение по умолчанию: auto.
Антон @pfilan