Свойства FLEX контейнера
display
Назначение: запуск flexbox
Возможные значения: flex / inline-flex
display:flex
1
2
3
4
display:inline-flex
Текст1
2
3
4
flex-direction
Назначение: направление укладки элементов по осям
Возможные значения: row / row-reverse / column / column-reverse
Значение по умолчанию: row
flex-direction: row
1
2
3
4
flex-direction: row-reverse
1
2
3
4
flex-direction: column
1
2
3
4
flex-direction: column-reverse
1
2
3
4
flex-wrap
Назначение: располагаться в одну строку или можно занять несколько строк
Возможные значения: nowrap / wrap / wrap-reverse
Значение по умолчанию: nowrap
flex-wrap: nowrap
1
2
3
4
5
6
7
flex-wrap: wrap
1
2
3
4
5
6
7
flex-wrap: wrap-reverse
1
2
3
4
5
6
7
flex-flow
Назначение: сокращённая запись для flex-direction и flex-wrap
Возможные значения: row, row-reverse, column, column-reverse / nowrap, wrap, wrap-reverse
Значение по умолчанию: row nowrap
flex-flow: row nowrap
1
2
3
4
5
6
7
flex-flow: column wrap
1
2
3
4
5
6
7
flex-flow: row-reverse wrap-reverse
1
2
3
4
5
6
7
justify-content
Назначение: горизонтальное выравнивание flex-элементов
Возможные значения: flex-start / flex-end / center / space-between / space-around / space-evenly
Значение по умолчанию: flex-start
justify-content: flex-start
1
2
3
4
justify-content: flex-end
1
2
3
4
justify-content: center
1
2
3
4
justify-content: space-between
1
2
3
4
justify-content: space-around
1
2
3
4
justify-content: space-evenly
1
2
3
4
align-items
Назначение: выравнивание flex-элементов вдоль центральной оси контейнера (по высоте)
Возможные значения: stretch / flex-start / flex-end / center / baseline
Значение по умолчанию: stretch
align-items: stretch
1
2
3
4
align-items: flex-start
1
2
3
4
align-items: flex-end
1
2
3
4
align-items: center
1
2
3
4
align-items: baseline
1
2
3
4
align-content
Назначение: выравнивание строк flex-элементов вдоль центральной оси контейнера
Возможные значения: stretch / flex-start / flex-end / center / space-between / space-around
Значение по умолчанию: stretch
align-content: stretch
1
2
3
4
align-content: flex-start
1
2
3
4
align-content: flex-end
1
2
3
4
align-content: center
1
2
3
4
align-content: space-between
1
2
3
4
align-content: space-around
1
2
3
4
Свойства FLEX элементов (внутри контейнера)
order
Назначение: определяет порядок flex-элементов внутри контейнера
Возможные значения: целое число
Значение по умолчанию: 0
order: 41
order: 22
order: 33
order: -14
flex-grow
Назначение: устанавливает фактор растягивания flex-элемента
Возможные значения: целое число
Значение по умолчанию: 0
flex-grow: 01
flex-grow: 12
flex-grow: 23
flex-grow: 04
flex-shrink
Назначение: устанавливает фактор сужения flex-элемента
Возможные значения: целое число
Значение по умолчанию: 0
flex-shrink: 01
flex-shrink: 12
flex-shrink: 23
flex-shrink: 04
flex-basis
Назначение: устанавливает размер flex-элемента
Возможные значения: длина элемента (например, 240px, 20%)
Значение по умолчанию: auto
flex-basis: 80px
flex-basis: auto
flex-basis: 30%
flex-basis: auto
flex
Назначение: сокращённая запись для свойств flex-grow, flex-shrink и flex-basis
Возможные значения: значения вышеперечисленных свойств
Значение по умолчанию: auto
flex: 0 0 80px
flex: 1 0 auto
flex: 0 0 10%
flex: 0 0 auto
align-self
Назначение: переопределяет выравнивание flex элемента
Возможные значения: auto / flex-start / flex-end / center / baseline / stretch
Значение по умолчанию: auto
align-self: auto
align-self: flex-start
align-self: flex-end
align-self: center
align-self: baseline
align-self: stretch