Что такое Flexbox?

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

Ключевые концепции Flexbox:

• Flex-контейнер: Элемент, для которого установлено display: flex или display: inline-flex. Именно в контейнере определяются правила макета для его прямых дочерних элементов.
• Flex-элементы: Прямые дочерние элементы flex-контейнера. К ним применяются свойства Flexbox, определяющие их поведение внутри контейнера.
• Основная ось (main axis): Ось, по которой располагаются flex-элементы. По умолчанию горизонтальная (слева направо), но может быть изменена свойством flex-direction.
• Поперечная ось (cross axis): Ось, перпендикулярная основной оси.
• Главное начало (main start) / Главный конец (main end): Начало и конец вдоль основной оси.
• Поперечное начало (cross start) / Поперечный конец (cross end): Начало и конец вдоль поперечной оси.

Основные свойства Flexbox для flex-контейнера:

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