Свойство CSS align-content
Свойство CSS align-content выравнивает строки flex контейнера, когда на поперечной оси есть свободное пространство.
Свойство align-content является одним из свойств CSS3.
Если в flexbox-контейнере всего одна строка, это свойство не оказывает никакого эффекта. Для его работы требуется наличие нескольких строк внутри гибкого контейнера.
Значение stretch является значением по умолчанию для этого свойства.
Свойство align-content принимает следующие значения:
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly
- stretch
| Начальное значение | stretch |
|---|---|
| Применяется к | Многострочным flex-контейнерам. |
| Наследуется | Нет. |
| Анимируется | Нет. |
| Версия | CSS3 |
| Синтаксис DOM | object.style.alignContent = "flex-end"; |
Синтаксис
Синтаксис свойства CSS align-content
css
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | initial | inherit;Пример использования свойства align-content со значением stretch:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row wrap;
align-content: stretch;
}
#example li {
width: 70px;
height: 70px;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-content: stretch; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;"></li>
<li style="background-color:#1c87c9;"></li>
<li style="background-color:#666;"></li>
</ul>
</body>
</html>Результат
Пример использования свойства align-content со значением "center":
html
<!DOCTYPE html>
<html>
<head>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row wrap;
align-content: center;
}
#example li {
width: 70px;
height: 70px;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-content: center; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;"></li>
<li style="background-color:#1c87c9;"></li>
<li style="background-color:#666;"></li>
</ul>
</body>
</html>Пример использования свойства align-content со значением "flex-start":
html
<!DOCTYPE html>
<html>
<head>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
}
#example li {
width: 70px;
height: 70px;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-content: flex-start; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;"></li>
<li style="background-color:#1c87c9;"></li>
<li style="background-color:#666;"></li>
</ul>
</body>
</html>Пример использования свойства align-content со значением "flex-end":
html
<!DOCTYPE html>
<html>
<head>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row wrap;
align-content: flex-end;
}
#example li {
width: 70px;
height: 70px;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-content: flex-end; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;"></li>
<li style="background-color:#1c87c9;"></li>
<li style="background-color:#666;"></li>
</ul>
</body>
</html>В следующем примере пространство распределяется равномерно между строками flex-контейнера.
Пример использования свойства align-content со значением "space-between":
html
<!DOCTYPE html>
<html>
<head>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row wrap;
align-content: space-between;
}
#example li {
width: 70px;
height: 70px;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-content: space-between; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;"></li>
<li style="background-color:#1c87c9;"></li>
<li style="background-color:#666;"></li>
</ul>
</body>
</html>Результат
Ещё один пример со значением "space-around". Между строками flex-контейнера соблюдается равное пространство.
Пример использования свойства align-content со значением “space-around”:
html
<!DOCTYPE html>
<html>
<head>
<style>
#example {
width: 70px;
height: 300px;
padding: 0;
border: 1px solid #c3c3c3;
display: flex;
flex-flow: row wrap;
align-content: space-around;
}
#example li {
width: 70px;
height: 70px;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-content: space-around; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;"></li>
<li style="background-color:#1c87c9;"></li>
<li style="background-color:#666;"></li>
</ul>
</body>
</html>Значения
| Значение | Описание | Попробовать |
|---|---|---|
| stretch | Растягивает элементы, чтобы они заполнили контейнер. Это значение по умолчанию для данного свойства. | Попробовать » |
| center | Элементы размещаются по центру контейнера. | Попробовать » |
| flex-start | Элементы размещаются в начале контейнера. | Попробовать » |
| flex-end | Элементы размещаются в конце контейнера. | Попробовать » |
| space-between | Равномерно распределяет пространство между строками flex-контейнера. | Попробовать » |
| space-around | Элементы распределяются с равным пространством между ними. | Попробовать » |
| space-evenly | Равномерно распределяет элементы с одинаковым пространством между ними, а также перед первым и после последнего элемента. | Попробовать » |
| initial | Заставляет свойство использовать значение по умолчанию. | Попробовать » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Какие значения может принимать свойство CSS align-content?