justify-content: space-between
— это свойство CSS, которое определяет распределение пространства между элементами в флекс-контейнере таким образом, чтобы первый элемент был прижат к левому краю, а последний элемент — к правому, а все остальные элементы равномерно распределялись между ними.
Например, если у нас есть 5 элементов в флекс-контейнере, с justify-content: space-between
, первый элемент будет прижат к левому краю контейнера, а пятый элемент — к правому. Тогда оставшиеся три элемента будут равномерно распределены между ними, создавая пространство между ними с равной шириной.
.container {
display: flex;
justify-content: space-between;
}
В этом примере justify-content: space-between
применяется к флекс-контейнеру с классом .container
, что приведет к тому, что элементы внутри него будут выровнены вдоль оси главной оси блока, начиная с краев.
Применение свойства justify-content: space-between
может быть полезно для создания таких эффектов, как равномерное распределение элементов по ширине экрана, исключая пространство между ними, или для создания меню навигации с элементами, выровненными по обоим краям экрана.