Направление и центрирование

Дальше шапка страницы: div с классом title-background, в котором лежат главный заголовок и подзаголовок. Мы хотим, чтобы они стояли один под другим и были по центру — и по горизонтали, и по вертикали.

До сих пор наши flex-элементы всегда стояли в строке. Направление главной оси задаёт свойство flex-direction flex-контейнера:

• row: строка слева направо. Это значение по умолчанию.
• column: столбец сверху вниз.
• row-reverse и column-reverse: строка справа налево или столбец снизу вверх, то есть последний элемент идёт первым.

Когда направление меняется, оси поворачиваются вместе с ним. В столбце главная ось идёт сверху вниз, а поперечная — слева направо:

А поскольку justify-content всегда работает по главной оси, а align-items — по поперечной, в столбце justify-content двигает элементы по вертикали, а align-items — по горизонтали. Чтобы поставить что-то по центру в обоих направлениях, нужны оба свойства, в каком бы направлении ни шла главная ось:

.container {
	display: flex;
	flex-direction: column;
	justify-content: center; /* в столбце: по вертикали */
	align-items: center; /* в столбце: по горизонтали */
}

Раньше выровнять что-то по вертикали было в CSS известной головной болью. С flexbox для этого достаточно нескольких объявлений.