🤔 За что отвечает justify-content и align-tiems у flexbox контейнера?

В CSS Flexbox, свойства justify-content и align-items используются для управления выравниванием и распределением элементов внутри flex-контейнера.

🚩`justify-content`

Свойство justify-content определяет, как flex-элементы должны быть распределены вдоль основной оси (main axis) контейнера. Основная ось по умолчанию — это горизонтальная ось для flex-direction: row и вертикальная ось для flex-direction: column.

🟠flex-start
Элементы прижаты к началу контейнера.

.container {
    display: flex;
    justify-content: flex-start;
}   

🟠flex-end
Элементы прижаты к концу контейнера.

.container {
    display: flex;
    justify-content: flex-end;
}   

🟠center
Элементы выровнены по центру контейнера.

.container {
    display: flex;
    justify-content: center;
}   

🟠space-between
Элементы равномерно распределены, первый элемент прижат к началу, последний элемент — к концу контейнера.

.container {
    display: flex;
    justify-content: space-between;
}   

🟠space-around
Элементы равномерно распределены с равным отступом вокруг них.

.container {
    display: flex;
    justify-content: space-around;
}   

🟠space-evenly
Элементы равномерно распределены с равными отступами между ними и краями контейнера.

.container {
    display: flex;
    justify-content: space-evenly;
}   

🚩`align-items`

Свойство align-items определяет, как flex-элементы должны быть выровнены вдоль поперечной оси (cross axis) контейнера. Поперечная ось перпендикулярна основной оси: вертикальная ось для flex-direction: row и горизонтальная ось для flex-direction: column.

🟠flex-start
Элементы прижаты к началу поперечной оси контейнера.

.container {
    display: flex;
    align-items: flex-start;
}   

🟠flex-end
Элементы прижаты к концу поперечной оси контейнера.

.container {
    display: flex;
    align-items: flex-end;
}   

🟠center
Элементы выровнены по центру поперечной оси контейнера.

.container {
    display: flex;
    align-items: center;
}   

🟠baseline
Элементы выровнены по их базовой линии текста.

.container {
    display: flex;
    align-items: baseline;
}   

🟠stretch
Элементы растянуты, чтобы заполнить контейнер вдоль поперечной оси (по умолчанию).

.container {
    display: flex;
    align-items: stretch;
}   

Ставь 👍 и забирай 📚 Базу знаний