Идеальное центрирование
Свойство flex-direction
Слева направо (flex-direction:row)
Справа налево (flex-direction:row-reverse)
Сверху вниз (flex-direction:column)
Снизу вверх (flex-direction:column-reverse)
Свойство flex-wrap
Все в одну строку (flex-wrap:nowrap)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Перенос от верха к низу (flex-wrap:wrap)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
В несколько строк снизу вверх (flex-wrap:wrap-reverse)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Свойство justify-content
Расстановка от начала строки (justify-content:flex-start)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Расстановка от конца строки (justify-content:flex-end)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Элементы центрируются вдоль строки (justify-content:center)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Элементы равномерно распределены по строке, первый в начале строки, последний в конце строки (justify-content:space-between)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Элементы равномерно распределены по строке с равным местом вокруг них (justify-content:space-around)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Свободное пространство между любыми 2-мя элементами равномерно как и место до границы котейнера(justify-content:space-evenly)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Свойство align-items
все размещается сначала поперечной оси(align-items:flex-start)
все размещается с конца поперечной оси(align-items:flex-end)
центрирование по поперечной оси(align-items:center)
выравнивание по базовой линии(align-items:baseline)
элементы растягиваются по всей высоте(align-items:stretch)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Свойство align-content
align-content:flex-start
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
align-content:flex-end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
align-content:center
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
align-content:space-between
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
align-content:space-around
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
align-content:stretch
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Свойства дочерних элементов
order: 1 - у третьего элемента
flex-grow
flex-shrink
1
2
3
4
5
6
7
8
9
10
11
12
flex-basis
align-self