align-content¶
Свойство align-content
задаёт тип выравнивания строк внутри флекс-контейнера по поперечной оси при наличии свободного пространства.
Flexbox и выравнивание
Руководство по Flexbox
Синтаксис¶
/* Positional alignment */
align-content: center; /* Pack items around the center */
align-content: start; /* Pack items from the start */
align-content: end; /* Pack items from the end */
align-content: flex-start; /* Pack flex items from the start */
align-content: flex-end; /* Pack flex items from the end */
align-content: left; /* Pack items from the left */
align-content: right; /* Pack items from the right */
/* Baseline alignment */
align-content: baseline;
align-content: first baseline;
align-content: last baseline;
/* Distributed alignment */
/* Distribute items evenly
The first item is flush with the start,
the last is flush with the end */
align-content: space-between;
/* Distribute items evenly
Items have a half-size space
on either end */
align-content: space-around;
/* Distribute items evenly
Items have equal space around them */
align-content: space-evenly;
/* Distribute items evenly
Stretch 'auto'-sized items to fit
the container */
align-content: stretch;
/* Overflow alignment */
align-content: safe center;
align-content: unsafe center;
/* Global values */
align-content: inherit;
align-content: initial;
align-content: unset;
Значения¶
Значение по-умолчанию: stretch
Применяется к флекс-контейнеру
Значение | Положение | Описание |
---|---|---|
flex-start | ![]() | Строки располагаются в начале поперечной оси. Каждая следующая строка идёт вровень с предыдущей. |
center | ![]() | Строки располагаются по центру контейнера. |
flex-end | ![]() | Строки располагаются начиная с конца поперечной оси. Каждая предыдущая строка идёт вровень со следующей. |
space-between | ![]() | Строки равномерно распределяются в контейнере и расстояние между ними одинаково. |
space-around | ![]() | Строки равномерно распределяются таким образом, чтобы пространство между двумя соседними строками было одинаковым. Пустое пространство перед первой строкой и после последней строки равно половине пространства между двумя соседними строками. |
stretch | ![]() | Строки равномерно растягиваются, заполняя свободное пространство. |
Спецификации¶
Поддержка браузерами¶
Пример¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>align-content</title>
<style>
.flex-container {
width: 70px;
height: 240px;
border: 1px solid #333;
padding: 10px;
display: flex;
flex-wrap: wrap;
align-content: center;
}
.flex-container div {
width: 70px;
height: 70px;
border-radius: 50%;
}
.red {
background: red;
}
.yellow {
background: yellow;
}
.green {
background: green;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>
</div>
</body>
</html>
Примечание¶
Safari до версии 9 поддерживает свойство -webkit-align-content
.
Ссылки¶
- Свойство
align-content
MDN (рус.)