Свойство 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>Читайте также
Обсуждение (1)
Войдите или зарегистрируйтесь для того чтобы оставлять комментарии