Шпаргалка по FlexBox

свойства flexbox

Свойства FLEX контейнера

display: -webkit-flex

Назначение: запуск flexbox

Возможные значения: flex / inline-flex

шпаргалка по flex
webkit-flex-direction: row

Назначение: направление укладки элементов по осям

Возможные значения: row / row-reverse / column / column-reverse

шпаргалка по flex
webkit-flex-wrap: nowrap

Назначение: располагать элементы в одну строку или в несколько

Возможные значения: nowrap / wrap / wrap-reverse

шпаргалка по flex
webkit-flex-flow: row nowrap

Назначение: сокращённая запись для св-в flex-direction и flex-wrap

Возможные значения: row, row-reverse, column, column-reverse / nowrap, wrap, wrap-reverse

webkit-justify-content: flex-start

Назначение: горизонтальное выравнивание flex-элементов

Возможные значения: flex-start / flex-end / center / space-between / space-around

шпаргалка по flex
webkit-align-items: stretch

Назначение: выравнивание flex-элементов вдоль центральной оси контейнера (по высоте)

Возможные значения: stretch / flex-start / flex-end / center / baseline

шпаргалка по flex
webkit-align-content: stretch

Назначение: выравнивание строк flex-элементов вдоль центральной оси контейнера

Возможные значения: stretch / flex-start / flex-end / center / space-between / space-around

шпаргалка по flex

Свойства FLEX элементов (внутри контейнера)

webkit-order: 0

Назначение: определяет порядок flex-элементов внутри контейнера

Возможные значения: целое число

шпаргалка по flex
webkit-flex-grow: 0

Назначение: устанавливает фактор растягивания flex-элемента

Возможные значения: целое число

шпаргалка по flex
webkit-flex-shrink: 0

Назначение: устанавливает фактор сужения flex-элемента

Возможные значения: целое число

шпаргалка по flex
webkit-flex-basis: 0

Назначение: устанавливает размер flex-элемента

Возможные значения: длина элемента (например, 240px)

шпаргалка по flex
webkit-flex: 0 1 auto

Назначение: сокращённая запись для св-в flex-grow, flex-shrink и flex-basis

Возможные значения: значения вышеперечисленных св-в

шпаргалка по flex
webkit-align-self: auto

Назначение: переопределяет выравнивание flex элемента

Возможные значения: auto / flex-start / flex-end / center / baseline / stretch

шпаргалка по flex
Олег Касьянов

Успеха в делах!

С уважением, Олег Касьянов

Русские шаблоны для Joomla

CMS для инфобизнеса и онлайн школ