Свойства Flexbox CSS

Инструкции » Свойства Flexbox CSS
Свойства Flexbox CSS

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.

 

1
Из рубрики
  • « Отправить комментарий »

    Добавить комментарий

    Войти с помощью: