Що таке flex в CSS3?

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

1. Вирівнювання елементів по горизонталі та вертикалі.
2. Гнучкий розподіл простору між елементами, включаючи автоматичне вирівнювання.
3. Управління порядком відображення елементів незалежно від їх початкового розташування в HTML.

Основним поняттям у Flexbox є flex-контейнер, який задається за допомогою властивості display: flex. Усі елементи всередині такого контейнера стають flex-елементами та починають підкорятися його правилам.

Flexbox часто використовується для побудови макетів, які повинні адаптуватися до змін розміру екрана, що робить його ідеальним для створення сучасних інтерфейсів.

/* Приклад використання CSS Flexbox */
.container {
    display: flex;
    justify-content: center; /* Вирівнювання по горизонталі */
    align-items: center;    /* Вирівнювання по вертикалі */
    gap: 20px;              /* Відстань між елементами */
}

.item {
    flex: 1;                /* Рівномірний розподіл простору */
    padding: 10px;
    background-color: lightblue;
    border: 1px solid gray;
}

Властивості Flexbox включають justify-content для управління горизонтальним розташуванням елементів, align-items для їх вертикального вирівнювання, а також flex-grow, flex-shrink та flex-basis, які визначають, як елементи будуть змінювати свої розміри відносно один одного.

Також можна використовувати flex-direction для вказівки напрямку розташування елементів: горизонтально (за замовчуванням) або вертикально. Ця властивість дозволяє легко перемикатися між горизонтальною та вертикальною орієнтацією макета.

Приклад налаштувань:

/* Вертикальне розташування елементів */
.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh; /* Висота контейнера — вся висота вікна */
}