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

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-элементы переноситься на новую строку/столбец при недостатке места