Свойство 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>

Свойство align-content

Описание

Синтаксис

Пример

Читайте также

Свойство accent-color

Свойство counter-reset

Свойство color

Стили к элементам на основе нумерации

Свойство widows