Flexbox используется для создания одномерных раскладок элементов в контейнере. Он позволяет управлять выравниванием, распределением пространства и порядком элементов.

Основные понятия:

Flex Container: Родительский элемент, которому присваивается display: flex или display: inline-flex.
Flex Items: Дочерние элементы Flex Container.
Main Axis: Главная ось Flex Container. Определяется свойством flex-direction. По умолчанию горизонтальная (row).
Cross Axis: Побочная ось, перпендикулярная Main Axis.

Ключевые свойства для Flex Container:

display: Определяет, что элемент является flex-контейнером (flex или inline-flex).
flex-direction: Задает направление главной оси (row, row-reverse, column, column-reverse).
justify-content: Выравнивает flex-элементы вдоль главной оси (flex-start, flex-end, center, space-between, space-around, space-evenly).
align-items: Выравнивает flex-элементы вдоль побочной оси (flex-start, flex-end, center, baseline, stretch).
flex-wrap: Определяет, должны ли flex-элементы переноситься на новую строку/столбец при недостатке места (nowrap, wrap, wrap-reverse).

Ключевые свойства для Flex Items:

order: Задает визуальный порядок flex-элемента (по умолчанию 0).
flex-grow: Определяет, насколько flex-элемент может увеличиваться относительно других (по умолчанию 0).
flex-shrink: Определяет, насколько flex-элемент может уменьшаться относительно других (по умолчанию 1).
flex-basis: Задает начальный размер flex-элемента до распределения свободного пространства (по умолчанию auto).
align-self: Переопределяет выравнивание flex-элемента вдоль побочной оси для отдельного элемента.

Пример использования:

css

html

Это позволяет легко центрировать элементы, создавать адаптивные сетки и управлять пространством между элементами.

Для чего используется flex в CSS?