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).
align-items: Выравнивает flex-элементы вдоль поперечной оси (flex-start, flex-end, center, baseline, stretch).
align-content: Выравнивает линии flex-элементов (если их несколько из-за flex-wrap) вдоль поперечной оси.

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

order: Определяет порядок отображения flex-элемента (по умолчанию 0).
flex-grow: Коэффициент роста flex-элемента, определяющий, насколько он может увеличиться, чтобы заполнить доступное пространство.
flex-shrink: Коэффициент сжатия flex-элемента, определяющий, насколько он может уменьшиться, чтобы избежать переполнения.
flex-basis: Начальный размер flex-элемента до распределения свободного пространства.
flex: Сокращение для flex-grow, flex-shrink и flex-basis.
align-self: Переопределяет align-items для конкретного flex-элемента.

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

HTML:

html

CSS:

css

Основные преимущества Flexbox:

Удобное выравнивание элементов по горизонтали и вертикали.
Гибкое распределение пространства между элементами.
Легкое изменение порядка элементов.
Адаптивный дизайн без использования float и position.
Хорошая поддержка в современных браузерах.

Что такое Flexbox?