Свойства Flex-контейнера
flex-direction ( свойство flex-контейнера )
Устанавливает основную ось, таким образом определяет направление flex-элементов расположенных в flex-контейнере.
1
2
3
4
5
flex-wrap ( свойство flex-контейнера )
Определяет смогут ли flex-элементы перемещаться на следующие строки когда перестают помещаться внутри flex-контейнера.
1
2
3
4
5
justify-content ( свойство flex-контейнера )
Определяет выравнивание вдоль основной оси (направление зависит от значения свойства flex-direction).
1
2
3
4
5
align-items ( свойство flex-контейнера )
Определяет выравнивание вдоль поперечной оси (направление зависит от значения свойства flex-direction).
1
2
3
4
5
align-content ( свойство flex-контейнера )
Описывается в спецификации как «упаковка flex строк»; управляет промежутками между flex-строками по перекрёстной оси.
свойство не влияет на однострочные flex-контейнеры (с flex-wrap: nowrap)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Свойства Flex-элементов
align-self ( свойство для flex-элементов )
Переопределяет для конкретного flex-элемента выравнивание вдоль поперечной оси (направление зависит от значения свойства flex-direction).
1
2
3
4
5
flex-grow ( свойство для flex-элементов )
Определяет возможность элемента увеличиваться в размере, при необходимости заполняя весь flex-контейнер. 0 запрещено. 1 разрешено.
1
2
3
4
5
flex-shrink ( свойство для flex-элементов )
Определяет возможность элемента уменьшаться в размере, при необходимости заполняя весь flex-контейер. 0 запрещено. 1 разрешено.
1
2
3
4
5
flex ( свойство для flex-элементов )
Определяет возможность элемента уменьшаться и увеличиваться в размере, при необходимости заполняя весь flex-контейнер (0 запрещено. 1 разрешено). А также задаёт базовый размер.
.item { flex: flex-grow [flex-shrink] [flex-basis]; }
| элемент 1 | элемент 2 |
1
2
order ( свойство для flex-элементов )
Управляет порядком, в котором располагаются flex-элементы внутри flex-контейнера.
1
2
3
4
5