Свойство 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>

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии