Что такое Flexbox?

Flexbox (Flexible Box Layout) — это модуль CSS, предназначенный для создания сложных и адаптивных макетов. Он позволяет управлять расположением, выравниванием и распределением пространства между элементами контейнера, даже если их размеры неизвестны или динамичны.

Основные концепции Flexbox:

• Основная ось (main axis): Ось, по которой располагаются элементы. По умолчанию горизонтальная (слева направо).
• Поперечная ось (cross axis): Ось, перпендикулярная основной оси. По умолчанию вертикальная (сверху вниз).
• Контейнер (flex container): Элемент, в котором применяются свойства Flexbox (display: flex или display: inline-flex).
• Элементы (flex items): Дочерние элементы контейнера.

Свойства для Flex-контейнера:

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