Frontend | Вопросы собесов

🤔 За что отвечает 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;

}   

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