Свойство align-content

Определяет, как каждая строка выравнивается внутри контейнера flexbox вдоль поперечной оси или внутри контейнера grid вдоль оси блока. Это применимо, только если присутствует flex-wrap со значением wrap и если есть несколько строк элементов flexbox / grid.

align-content: center;
  • поддерживается начиная с
  • частичная поддержка до
  • не поддерживается

Значения

align-content: flex-start;

Строки будут стремиться к началу контейнера. Применимо только для flexbox

<style>
.example-1 {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    height: 350px;
    outline: 2px dashed #ccc;
}
.example-1-item {
    width: 40%;
    height: 100px;
    margin: 2px;
    background: #ce3482;
}
</style>

<div class="example-1">
    <div class="example-1-item"></div>
    <div class="example-1-item"></div>
    <div class="example-1-item"></div>
</div>
align-content: flex-end;

Строки будут стремиться к концу контейнера. Применимо только для flexbox

<style>
.example-2 {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
    height: 350px;
    outline: 2px dashed #ccc;
}
.example-2-item {
    width: 40%;
    height: 100px;
    margin: 2px;
    background: #ce3482;
}
</style>

<div class="example-2">
    <div class="example-2-item"></div>
    <div class="example-2-item"></div>
    <div class="example-2-item"></div>
</div>
align-content: center;

Строки будут выровнены по центру контейнера

<style>
.example-3 {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    height: 350px;
    outline: 2px dashed #ccc;
}
.example-3-item {
    width: 40%;
    height: 100px;
    margin: 2px;
    background: #ce3482;
}
</style>

<div class="example-3">
    <div class="example-3-item"></div>
    <div class="example-3-item"></div>
    <div class="example-3-item"></div>
</div>
align-content: space-between;

Каждая строка займет необходимое ей пространство, оставшееся пространство появится между строк. Интервал между строк одинаков. Первая строка будет прижата к началу контейнера, последняя - к концу.

<style>
.example-4 {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    height: 350px;
    outline: 2px dashed #ccc;
}
.example-4-item {
    width: 40%;
    height: 100px;
    margin: 2px;
    background: #ce3482;
}
</style>

<div class="example-4">
    <div class="example-4-item"></div>
    <div class="example-4-item"></div>
    <div class="example-4-item"></div>
</div>
align-content: space-around;

Каждая строка займет необходимое ей пространство. Интервал между каждой парой соседних строк одинаков. Пустое пространство до первого и после последнего элемента равно половине пространства между каждой парой соседних строк.

<style>
.example-5 {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    height: 350px;
    outline: 2px dashed #ccc;
}
.example-5-item {
    width: 40%;
    height: 100px;
    margin: 2px;
    background: #ce3482;
}
</style>

<div class="example-5">
    <div class="example-5-item"></div>
    <div class="example-5-item"></div>
    <div class="example-5-item"></div>
</div>
align-content: space-evenly;

Каждая строка займет необходимое ей пространство. Интервал между каждой строк одинаков.

<style>
.example-6 {
    display: flex;
    flex-wrap: wrap;
    align-content: space-evenly;
    height: 350px;
    outline: 2px dashed #ccc;
}
.example-6-item {
    width: 40%;
    height: 100px;
    margin: 2px;
    background: #ce3482;
}
</style>

<div class="example-6">
    <div class="example-6-item"></div>
    <div class="example-6-item"></div>
    <div class="example-6-item"></div>
</div>
align-content: start;

Строки grid контейнера будут стремиться к началу контейнера

<style>
.example-7 {
    display: grid;
    grid-template-rows: 20% 20% 20%;
    grid-row-gap: 15px;
    align-content: start;
    height: 350px;
    outline: 2px dashed #ccc;
}
.example-7-item {
    background: #ce3482;
}
</style>

<div class="example-7">
    <div class="example-7-item"></div>
    <div class="example-7-item"></div>
    <div class="example-7-item"></div>
</div>
align-content: end;

Строки grid контейнера будут стремиться к концу контейнера

<style>
.example-8 {
    display: grid;
    grid-template-rows: 20% 20% 20%;
    grid-row-gap: 15px;
    align-content: end;
    height: 350px;
    outline: 2px dashed #ccc;
}
.example-8-item {
    background: #ce3482;
}
</style>

<div class="example-8">
    <div class="example-8-item"></div>
    <div class="example-8-item"></div>
    <div class="example-8-item"></div>
</div>
align-content: stretch;

Неиспользуемое пространство контейнера равномерно распределяется по строкам контейнера так, чтобы строки занимали всю высоту контейнера

<style>
.example-9 {
    display: grid;
    grid-row-gap: 15px;
    align-content: stretch;
    height: 350px;
    outline: 2px dashed #ccc;
}
.example-9-item {
    background: #ce3482;
}
</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)

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