Свойство align-content
Описание
Указывает, как выравниваться строкам внутри флекс - контейнера по поперечной оси при условии, что есть свободное пространство.
Синтаксис
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch;Подробности
| Значение | Описание |
| flex-start | Строки располагаются в начале поперечной оси. |
| center | Строки располагаются по центру контейнера. |
| flex-end | Строки располагаются начиная с конца поперечной оси. |
| space-between | Строки равномерно распределяются в контейнере с одинаковым расстоянием. |
| space-around | Строки равномерно распределяются, пространство между двумя соседними строками становится одинаковым. Пустое пространство перед первой строкой и после последней строки равно 1/2 пространства между двумя соседними строками. |
| space-evenly | Строки равномерно распределяются, между двумя соседними строками, первой строкой и после последней строки расстояние будет одинаковым. |
| stretch | Строки равномерно растягиваются, заполняя все свободное пространство. Используется по умолчанию. |
Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
.blue{
width: 100%;
height: 300px;
padding: 5px;
background-color: lightblue;
display: flex;
align-content: space-between;
flex-wrap: wrap;
}
#pink{
width: 35%;
height: 40px;
background-color: pink;
margin: 5px;
}
</style>
<div class='blue'>
<div id='pink'></div>
<div id='pink'></div>
<div id='pink'></div>
<div id='pink'></div>
</div>
</body>
</html>Читайте также
Свойство user-select
Управляет поведением выделения текста и других элементов на странице, в частности, позволяет запретить выделение текста. Обычно применяется для интера...
Свойство order
Определяет порядок вывода флексов внутри флекс-контейнера. Элементы располагаются согласно значениям свойства order от меньшего к большему. При равных...
Родственные селекторы
Родственные селекторы по своему поведению похожи на соседние селекторы (запись вида E + F), но в отличие от них стилевые правила применяются ко всем б...
Свойство grid-column-start
Определяет размер ширины линий. Вы можете думать об этом, как о настройке ширины отступов между столбцами....