Создание сайта на CMS WordPress: обучение и хостинг

СВОЙСТВО ALIGN-CONTENT

Свойство align-content устанавливает, как браузер распределяет пространство между элементами содержимого и вокруг них вдоль поперечной оси контейнера flexbox и главной оси контейнера сетки.

Поддержка браузеров


11+

Синтаксис

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit

Значения свойства

Значение	Описание
stretch	Строки растягиваются и заполняют свободное пространство. Это значение по умолчанию.
center	Строки выравниваются по центру.
flex-start	Строки выравниваются относительно начала контейнера.
flex-end	Строки выравниваются относительно конца контейнера.
space-between	Элементы равномерно распределяются внутри контейнера вдоль поперечной оси. Расстояние между элементами будет одинаковым.
space-around	Элементы равномерно распределяются внутри контейнера вдоль поперечной оси. Расстояние между элементами будет одинаковым. Расстояние до первого и после последнего элементов будет равно половине расстояния между элементами.
initial	Устанавливает значение по умолчанию.
inherit	Унаследует значение свойства от родительского элемента.

Песочница

<div class="flex">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

HTML

.flex {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    height: 360px;
    width: 100px;
    border: 1px solid #ddd
}

.item {
    height: 100px;
    width: 100px
}

.item:nth-child(1) {
    background: yellow
}

.item:nth-child(2) {
    background: blue
}

.item:nth-child(3) {
    background: beige
}

CSS

← Перейти к списку свойств