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

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

Свойство outline-width

Указывает толщину внешней границы элемента.<br><br>В отличие от свойства border-width...

Свойство top

Свойство top для позиционированного элемента определяет расстояние от верхнего края родительского...

Класс

Классы применяют, когда необходимо определить стиль для одного или нескольких элементов веб-стран...

Свойство backface-visibility

Определяет, показывать обратную сторону элемента или нет. Как правило, обратная сторона становитс...

Селектор по тегу

В качестве селектора может выступать любой элемент HTML, для которого определяются правила формат...