User Avatar

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

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

Функция repeating-linear-gradient()

Создаёт бесконечно повторяющийся линейный градиент, образуя тем самым фоновый узор. По своему действию похожа на функцию linear-gra...

Стиль input / textarea, отображающего в данный момент подсказки

Определяет стиль элемента input или textarea, который в данный момент отображает текст подсказки, заданной атрибутом placeholder. Такая подсказка обыч...

Стиль первого символа в тексте

Псевдоэлемент ::first-letter определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться толь...

Свойство margin-left

Устанавливает величину отступа от левой границы текущего элемента до внутренней границы его родительского элемента....