Flexbox, скорочено від Flexible Box Layout, — це модуль CSS, розроблений для спрощення вирівнювання, розподілу та організації елементів у межах контейнера.

Flexbox використовує відношення батьківського та дочірнього елементів. Батьківський елемент називається flex-контейнером, який керує розташуванням. Дочірні елементи називаються flex-елементами, розмір, позицію та порядок яких можна контролювати за допомогою властивостей flexbox.

Примітка

Flexbox поводиться інакше, ніж блочні та рядкові елементи. На відміну від блочних елементів, flex-елементи не розташовуються вертикально; за замовчуванням вони вирівнюються у ряд або стовпець. Крім того, відступи по краях контейнера не виходять за його межі.

Flexbox у дії

Flexbox працює шляхом вирівнювання елементів вздовж осей flex-контейнера. Щоб увімкнути Flexbox, достатньо застосувати властивість display: flex; до батьківського елемента. Після цього можна налаштовувати вирівнювання та розподіл елементів у контейнері.