Свойства flex-контейнера

Flex-контейнер — это элемент с display: flex. Он управляет расположением своих дочерних элементов с помощью специальных свойств.

display: flex vs inline-flex

Есть два способа создать flex-контейнер:

flex-direction

Определяет направление главной оси — как элементы располагаются в контейнере:

flex-wrap

Управляет переносом элементов, если они не помещаются в одну линию:

justify-content

Выравнивает элементы вдоль главной оси. Это одно из самых часто используемых свойств:

Совет: space-between идеален для шапок сайтов (логотип слева, меню справа).

align-items

Выравнивает элементы вдоль поперечной оси:

align-content

Работает только при flex-wrap: wrap. Выравнивает строки flex-элементов:

gap (современное свойство)

Задаёт отступы между flex-элементами. Это современная замена margin:

Практика: Центрирование элемента

Классическая задача — отцентрировать элемент по вертикали и горизонтали. С Flexbox это 3 строки CSS: