Що таке Flexbox?

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

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

Примітка

Усередині flex-контейнера багато звичайних правил позиціонування не застосовуються так, як очікувалося. Давайте розглянемо наступний список:

• Робота з flex-елементами відрізняється від роботи з елементами inline або block-level.
• На відміну від елементів block-level, flex-елементи не перекривають інші елементи і не накладаються один на одного.
• Поля, застосовані на краях батьківського елемента, не виходять за його межі.

flex модель

Оскільки ми не маємо справу з вбудованими або блоковими елементами, потік документів у флекс-моделі визначається осями флекс-контейнера, за якими вирівнюються всі елементи. Щоб ініціювати поведінку flexbox, ми застосовуємо властивість display: flex; до батьківського елемента, що містить усі елементи.

Ми можемо впливати на напрямок розташування flex-елементів. За замовчуванням, flex-елементи розташовуються у ряд. Однак ми можемо змінити цю поведінку за допомогою властивості flex-direction. Давайте порівняємо документообіг без флексу та з флексом: