Шпаргалка по Flexbox (CSS3 Flexible Box)

Шпаргалка по Flexbox (CSS3 Flexible Box)

Флекс — это набор свойств контейнера и элементов. Некоторые из этих свойств добавляются к контейнеру, родительскому элементу, известному как «флекс-контейнер» (flex container), другие — к дочерним элементам, известным как «флекс-элементы» (flex items). С помощью Flexbox CSS можно делать:

  • Горизонтальное и вертикальное построение элементов.
  • Можно указывать сортировку.
  • Можно определять автоматически размер элементов.

    • А так же многое другое. Вот небольшая шпаргалка по Flexbox CSS, которая пригодится тем, кто не знает все свойства на память, ее можно скачать в PDF.

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

    display

    Для того, что бы свойства элементов заработали, нужно добавить display родительскому контейнеру. Это многоцелевое свойство, которое определяет, как элемент должен быть показан в документе. Применяется ко всем элементам в контейнере. Элементы в контейнере контентно-зависимые, ширина контейнера будет по количеству элементов, если она не указана.

    Назначение

    Запуск flexbox

    Возможные значения

    flex | inline-flex

    FLEX

    1
    2
    3
    4
    
.parent-container{
    display: flex;
}

    INLINE-FLEX

    1
    2
    3
    4
    
.parent-container{
    display: inline-flex;
}

    flex-direction

    Свойство flex-direction задаёт направление основных осей в контейнере и тем самым определяет положение элементов в контейнере.

    Назначение

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

    Возможные значения

    row | row-reverse | column | column-reverse

    ROW

    1
    2
    3
    4
    
.parent-container{
    display: flex;
    flex-direction: row;
}

    ROW-REVERSE

    1
    2
    3
    4
    
.parent-container{
    display: flex;
    flex-direction: row-reverse;
}

    COLUMN

    1
    2
    3
    4
    
.parent-container{
    display: flex;
    flex-direction: column;
}

    COLUMN-REVERSE

    1
    2
    3
    4
    
.parent-container{
    display: flex;
    flex-direction: column-reverse;
}

    flex-wrap

    Свойство flex-wrap указывает, следует ли элементам располагаться в одну строку или можно занять несколько строк. Если перенос строк допускается, то свойство также позволяет контролировать направление, в котором выкладываются строки.

    Назначение

    Расположение элементов в одну строку или в несколько

    Возможные значения

    nowrap | wrap | wrap-reverse

    NOWRAP

    1
    2
    3
    4
    
.parent-container{
    display: flex;
    flex-wrap: nowrap;
}

    WRAP

    1
    2
    3
    4
    
.parent-container{
    display: flex;
    flex-wrap: wrap;
}

    WRAP-REVERSE

    1
    2
    3
    4
    
.parent-container{
    display: flex;
    flex-wrap: wrap-reverse;
}

    flex-flow

    Свойство flex-flow является сокращённым свойством для отдельных свойств flex-direction и flex-wrap.

    Назначение

    Сокращенная запись для свойств flex-direction и flex-wrap

    Возможные значения

    row nowrap | column-reverse | column wrap | row-reverse wrap-reverse

    ROW NOWRAP

    1
    2
    3
    4
    
.parent-container{
    display: flex;
    flex-flow: row nowrap;
}

    COLUMN-REVERSE

    1
    2
    3
    4
    
.parent-container{
    display: flex;
    flex-flow: column-reverse;
}

    COLUMN WRAP

    1
    2
    3
    4
    
.parent-container{
    display: flex;
    flex-flow: column wrap;
}

    ROW-REVERSE WRAP-REVERSE

    1
    2
    3
    4
    
.parent-container{
    display: flex;
    flex-flow: row-reverse wrap-reverse;
}

    justify-content

    Свойство justify-content определяет, как браузер распределяет пространство вокруг flex-элементов вдоль главной оси контейнера. Это делается после того, как применяются размеры и автоматические отступы, за исключением ситуации, когда по крайней мере у одного элемента flex-grow больше нуля.

    Назначение

    Горизонтальное выравнивание flex-элементов

    Возможные значения

    flex-start | flex-end | center | space-between | space-around | space-evenly

    FLEX-START

    1
    2
    3
    4
    
.parent-container{
    display: flex;
    justify-content: flex-start;
}

    FLEX-END

    1
    2
    3
    4
    
.parent-container{
    display: flex;
    justify-content: flex-end;
}

    FLEX-CENTER

    1
    2
    3
    4
    
.parent-container{
    display: flex;
    justify-content: center;
}

    SPACE-BETWEEN

    1
    2
    3
    4
    
.parent-container{
    display: flex;
    justify-content: space-between;
}

    SPACE-AROUND

    1
    2
    3
    4
    
.parent-container{
    display: flex;
    justify-content: space-around;
}

    SPACE-EVENLY

    1
    2
    3
    4
    
.parent-container{
    display: flex;
    justify-content: space-evenly;
}

    align-items

    Свойство align-items выравнивает flex-элементы внутри контейнера в перпендикулярном направлении.

    Назначение

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

    Возможные значения

    stretch | flex-start | flex-end | center | baseline

    STRETCH

    1
    2
    3
    4
    
.parent-container{
    display: flex;
    align-items: stretch;
}

    FLEX-START

    1
    2
    3
    4
    
.parent-container{
    display: flex;
    align-items: flex-start;
}

    FLEX-END

    1
    2
    3
    4
    
.parent-container{
    display: flex;
    align-items: flex-end;
}

    CENTER

    1
    2
    3
    4
    
.parent-container{
    display: flex;
    align-items: center;
}

    BASELINE

    1
    2
    3
    4
    
.parent-container{
    display: flex;
    align-items: baseline;
}

    align-content

    Свойство align-content задаёт тип выравнивания строк внутри flex контейнера по поперечной оси при наличии свободного пространства.

    Назначение

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

    Возможные значения

    stretch | flex-start | flex-end | center | space-between | space-around | space-evenly

    STRETCH

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    
.parent-container{
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
}

    FLEX-START

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    
.parent-container{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

    FLEX-END

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    
.parent-container{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
}

    CENTER

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    
.parent-container{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

    SPACE-BETWEEN

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    
.parent-container{
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}

    SPACE-AROUND

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    
.parent-container{
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
}

    SPACE-EVENLY

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    
.parent-container{
    display: flex;
    flex-wrap: wrap;
    align-content: space-evenly;
}

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

    order

    Свойство order определяет порядок вывода flex-элементов внутри flex-контейнера. Элементы располагаются согласно значениям свойства order от меньшего к большему. При равных значениях order элементы выводятся в том порядке, в каком они появляются в исходном коде.

    Назначение

    Определяет порядок flex-элементов внутри контейнера

    Возможные значения

    Целое число

    -1

    1
    2
    3
    4
    
.parent-container{
    display: flex;
    align-items: flex-start;
}
.element-active{
	order: -1;
}

    0

    1
    2
    3
    4
    
.parent-container{
    display: flex;
    align-items: flex-start;
}
.element-active{
	order: 0;
}

    1

    1
    2
    3
    4
    
.parent-container{
    display: flex;
    align-items: flex-start;
}
.element-active{
	order: 1;
}

    flex-grow

    Свойство flex-grow задает коэффициент роста flex для заданного числа. Отрицательное значение не валидно.

    Назначение

    Устанавливает фактор растягивания flex-элемента

    Возможные значения

    Целое число

    0

    1
    2
    3
    4
    
.parent-container{
    display: flex;
}
.element-active{
	flex-grow: 0;
}

    1

    1
    2
    3
    4
    
.parent-container{
    display: flex;
}
.element-active{
	flex-grow: 1;
}

    flex-shrink

    Свойство flex-shrink задает коэффициент сжатия flex с заданным числом. Отрицательное значение не валидно.

    Назначение

    Устанавливает фактор сужения flex-элемента

    Возможные значения

    Целое число

    0

    1
    2
    3
    4
    
.parent-container{
    display: flex;
}
.element{
	width: 50%;
}
.element-active{
	flex-shrink: 0;
}

    1

    1
    2
    3
    4
    
.parent-container{
    display: flex;
}
.element{
	width: 50%;
}
.element-active{
	flex-shrink: 1;
}

    flex-basis

    Свойство flex-basis определяет основу flex-элемента, которая является начальным размером элемента. Похоже на свойства width и height, к которым добавляется содержимое элемента.

    Назначение

    Устанавливает размер flex-элемента

    Возможные значения

    Длина элемента

    20%

    1
    2
    3
    4
    
.parent-container{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}
.element-active{
	flex-basis: 20%;
}

    50%

    1
    2
    3
    4
    
.parent-container{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}
.element-active{
	flex-basis: 50%;
}

    CONTENT

    1
    2
    3
    4
    
.parent-container{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}
.element-active{
	flex-basis: content;
}

    align-self

    Свойство align-self выравнивает flex-элементы текущей строки, переписывая значение align-items.

    Назначение

    Переопределяет выравнивание flex-элемента

    Возможные значения

    auto | flex-start | flex-end | center | baseline | stretch

    FLEX-START

    1
    2
    3
    4
    
.parent-container{
    display: flex;
}
.element-active{
	align-self: flex-start;
}

    FLEX-END

    1
    2
    3
    4
    
.parent-container{
    display: flex;
}
.element-active{
	align-self: flex-end;
}

    CENTER

    1
    2
    3
    4
    
.parent-container{
    display: flex;
}
.element-active{
	align-self: center;
}

    BASELINE

    1
    2
    3
    4
    
.parent-container{
    display: flex;
}
.element-active{
	align-self: baseline;
}

    STRETCH

    1
    2
    3
    4
    
.parent-container{
    display: flex;
}
.element-active{
	align-self: stretch;
}
    By julia