Свойство justify-content
Определяет, как элементы flexbox / grid выравниваются в соответствии с главной осью внутри контейнера
justify-content: center;
- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
justify-content: flex-start;
Элементы flexbox смещаются к началу главной оси контейнера
<style>
.example-1 {
display: flex;
justify-content: flex-start;
outline: 2px dashed #ccc;
}
.example-1-item {
width: 100px;
height: 100px;
background: #75ca98;
border-radius: 50%;
}
</style>
<div class="example-1">
<div class="example-1-item"></div>
<div class="example-1-item"></div>
<div class="example-1-item"></div>
</div>
justify-content: flex-end;
Элементы flexbox смещаются к концу главной оси контейнера
<style>
.example-2 {
display: flex;
justify-content: flex-end;
outline: 2px dashed #ccc;
}
.example-2-item {
width: 100px;
height: 100px;
background: #75ca98;
border-radius: 50%;
}
</style>
<div class="example-2">
<div class="example-2-item"></div>
<div class="example-2-item"></div>
<div class="example-2-item"></div>
</div>
justify-content: center;
Элементы flexbox / grid центрированы вдоль главной оси контейнера
<style>
.example-3 {
display: flex;
justify-content: center;
outline: 2px dashed #ccc;
}
.example-3-item {
width: 100px;
height: 100px;
background: #75ca98;
border-radius: 50%;
}
</style>
<div class="example-3">
<div class="example-3-item"></div>
<div class="example-3-item"></div>
<div class="example-3-item"></div>
</div>
justify-content: space-between;
Оставшееся пространство распределяется между элементами flexbox / grid
<style>
.example-4 {
display: flex;
justify-content: space-between;
outline: 2px dashed #ccc;
}
.example-4-item {
width: 100px;
height: 100px;
background: #75ca98;
border-radius: 50%;
}
</style>
<div class="example-4">
<div class="example-4-item"></div>
<div class="example-4-item"></div>
<div class="example-4-item"></div>
</div>
justify-content: space-around;
Оставшееся пространство распределяется вокруг элементов flexbox / grid. Пустое пространство до первого и после последнего элемента равно половине пространства между каждым элементом.
<style>
.example-5 {
display: flex;
justify-content: space-around;
outline: 2px dashed #ccc;
}
.example-5-item {
width: 100px;
height: 100px;
background: #75ca98;
border-radius: 50%;
}
</style>
<div class="example-5">
<div class="example-5-item"></div>
<div class="example-5-item"></div>
<div class="example-5-item"></div>
</div>
justify-content: space-evenly;
Оставшееся пространство распределяется равномерно вокруг элементов flexbox / grid.
<style>
.example-6 {
display: flex;
justify-content: space-evenly;
outline: 2px dashed #ccc;
}
.example-6-item {
width: 100px;
height: 100px;
background: #75ca98;
border-radius: 50%;
}
</style>
<div class="example-6">
<div class="example-6-item"></div>
<div class="example-6-item"></div>
<div class="example-6-item"></div>
</div>
justify-content: start;
Элементы grid смещаются к началу главной оси контейнера
<style>
.example-7 {
display: grid;
grid-template-columns: auto auto auto;
grid-column-gap: 15px;
justify-content: start;
outline: 2px dashed #ccc;
}
.example-7-item {
width: 100px;
height: 100px;
background: #75ca98;
border: 2px solid #3ca065;
}
</style>
<div class="example-7">
<div class="example-7-item"></div>
<div class="example-7-item"></div>
<div class="example-7-item"></div>
</div>
justify-content: end;
Элементы grid смещаются к концу главной оси контейнера
<style>
.example-8 {
display: grid;
grid-template-columns: auto auto auto;
grid-column-gap: 15px;
justify-content: end;
outline: 2px dashed #ccc;
}
.example-8-item {
width: 100px;
height: 100px;
background: #75ca98;
border: 2px solid #3ca065;
}
</style>
<div class="example-8">
<div class="example-8-item"></div>
<div class="example-8-item"></div>
<div class="example-8-item"></div>
</div>
justify-content: stretch;
Растягивает элементы grid контейнера так, чтобы они занимали равномерно всю ширину контейнера
<style>
.example-9 {
display: grid;
grid-template-columns: auto auto auto;
grid-column-gap: 15px;
justify-content: stretch;
outline: 2px dashed #ccc;
}
.example-9-item {
height: 100px;
background: #75ca98;
border: 2px solid #3ca065;
}
</style>
<div class="example-9">
<div class="example-9-item"></div>
<div class="example-9-item"></div>
<div class="example-9-item"></div>
</div>