align-content¶
Свойство align-content
задаёт тип выравнивания строк внутри флекс-контейнера по поперечной оси при наличии свободного пространства.
Синтаксис¶
/* 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
.