FlexBox Шпаргалка

Чтобы использовать flex технологию, нужно использовать display: flex или display: inline-flex

№1 flex-direction - Направление элементов

Значения:
  • row
  • row-reverse
  • column
  • column-reverse
flex-direction: row
1
2
3
flex-direction: row-reverse
1
2
3
flex-direction: column
1
2
3
flex-direction: column-reverse
1
2
3

№2 flex-wrap - Управление элементами, которые не помещаются в одну строку

Значения:
  • nowrap
  • wrap
  • wrap-reverse
flex-wrap: nowrap
1
2
3
4
5
6
7
8
9
10
flex-wrap: wrap
1
2
3
4
5
6
7
flex-wrap: wrap-reverse
1
2
3
4
5
6
7

№3 justify-content - Выравнивает элементы вдоль главной оси элементов

Значения:
  • flex-start
  • center
  • flex-end
  • space-between
  • space-around
justify-content: flex-start
1
2
3
justify-content: center
1
2
3
justify-content: flex-end
1
2
3
justify-content: space-between
1
2
3
justify-content: space-around
1
2
3

№4 align-items - Выравнивает элементы вдоль поперечной оси элементов

Значения:
  • flex-start
  • center
  • flex-end
  • baseline
  • stretch
align-items: flex-start
1
2
3
align-items: center
1
2
3
align-items: flex-end
1
2
3
align-items: baseline
1
2
3
align-items: stretch
1
2
3

№5 align-content - Выравнивает строки блоков, по вертикали (Работает только при нескольких строках блоков

Значения:
  • flex-start
  • center
  • flex-end
  • space-between
  • space-around
  • stretch
align-content: flex-start
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
align-content: center
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
align-content: flex-end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
align-content: space-between
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
align-content: space-around
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
align-content: stretch
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

№6 order - меняет порядок элементов

Вводится номер - order: -1; order: 100
order: -100 (Для 4 элемента)
1
2
3
4
5
6

№7 align-self - Это align по вертикали, только для строки элементов

Значения:
  • flex-start
  • center
  • flex-end
  • baselinen
  • stretch
align-self: flex-start
1
2
3
4
5
6
align-self: center
1
2
3
4
5
6
align-self: flex-end
1
2
3
4
5
6
align-self: baseline
1
2
3
4
5
6
align-self: stretch
1
2
3
4
5
6

№8 flex-grow - определяет как много свободного пространства во flex-контейнере должно быть назначено текущему элементу

(flex grow factor — «коэффициент увеличения flex»). Свободное пространство — разница между размером flex-контейнера и размером всех его flex-элементов вместе. На практике flex-grow используется вместе с другими flex-свойствами flex-shrink и flex-basis, и обычно определяется с помощью сокращения (shorthand) flex, чтобы убедиться, что все значения заданы. flex-grow: 3.2
1
2
3
2
1
1
1
2

№9 flex-shrink - свойство CSS, которое определяет фактор сжатия flex-элемента.

Flex-элементы будут заполнять контейнер в зависимости от значения flex-shrink, когда стандартная ширина flex-элементов шире, чем flex-контейнер. flex-shrink: 1.7
1
2
1
3
3
3
1
2

№10 flex-basis - задает базовый размер флекс элемента по основной оси.

CSS свойство flex-basis задает базовый размер флекс элемента по основной оси. Это свойство определяет размер контент-бокса, если не задано иначе через box-sizing.
flex-basis: auto;
flex-basis: 200px;
flex-basis: 0em;
Внимание: в случае, если для элемента одновременно заданы flex-basis (отличное от auto) и width ( или height в случае flex-direction: column), flex-basis имеет приоритет.
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;
flex-basis: content;
1
2
3
4
1
2
3
4

№11 flex - это сокращенное свойство, определяющее способность гибкого элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства.

Это свойство устанавливает flex-grow, flex-shrink и flex-basis.
flex: 1.2 2.3 200px
1
2
3