CSS стиль align-content. Как выровнять строки во flex-контейнере
CSS стиль align-content задает тип выравнивания строк внутри flex-контейнера по вертикали при наличии свободного пространства.
Safari поддерживает свойство -webkit-align-content.
CSS стиль align-content работает только в случае, если разрешен перенос строк, указано направление flex-flow и высота flex-контейнера.
Краткая информация по CSS-свойству align-content
Значение по умолчанию | stretch |
Наследуется | Нет |
Применяется | К flex-элементам |
Правила написания свойства align-content
align-content: свойство
Поясним значения свойств:
Объектная модель
Объект.style.alignContent
Пример применения стиля align-content
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Пример CSS стиля align-content</title>
<style>
.flex-cont {
width: 70px;
height: 240px;
border: 1px solid #333;
padding: 10px;
display: flex;
flex-wrap: wrap;
align-content: center;
}
.flex-cont__div {
width: 70px; height: 70px;
border-radius: 50%;
}
.flex-cont__div--red {background: red;}
.flex-cont__div--yellow {background: yellow;}
.flex-cont__div--green {background: green;}
</style>
</head>
<body>
<section class="flex-cont">
<div class="flex-cont__div flex-cont__div--red"></div>
<div class="flex-cont__div flex-cont__div--yellow"></div>
<div class="flex-cont__div flex-cont__div--green"></div>
</section>
</body>
</html>