Свойство «justify-content: space-evenly» в CSS используется для распределения элементов внутри контейнера по горизонтальной линии с равными промежутками между ними и с равными отступами на обоих сторонах контейнера.
Этот способ выравнивания элементов по порядку подходит, когда требуется разнесение элементов на определенном расстоянии от краев контейнера. Свойство «space-evenly» может использоваться для равномерного размещения кнопок, блоков, изображений и других элементов.
Поддержка свойства «justify-content: space-evenly» была добавлена в CSS3 и обеспечивается современными браузерами (Chrome, Edge, Firefox, Safari, Opera), а также IE 11.
Пример использования свойства «justify-content: space-evenly» на контейнере с элементами <li>:
ul {
display: flex;
justify-content: space-evenly;
list-style: none;
margin: 0;
padding: 0;
}
li {
background-color: #ccc;
color: #fff;
padding: 10px;
}В этом примере свойство «justify-content: space-evenly» применяется к контейнеру <ul> с элементами <li> внутри. Стили свойства «justify-content: space-evenly» приводят к распределению элементов внутри <ul> с равными промежутками между ними и с равными отступами на обоих сторонах.
