---
title: align-content
slug: Web/CSS/align-content
translation_of: Web/CSS/align-content
---
<div>{{CSSRef}}</div>
<p>Свойство {{cssxRef('', 'CSS')}} <strong><code>align-content</code></strong> устанавливает распределение пространства между и вокруг элементами контента вдоль поперечной оси {{cssxRef('CSS_Flexible_Box_Layout', 'flexbox')}} контейнера или вдоль блочной оси {{cssxRef('CSS_Grid_Layout', 'grid')}} контейнера.</p>
<p>The interactive example below use Grid Layout to demonstrate some of the values of this property.</p>
<div>{{EmbedInteractiveExample("pages/css/align-content.html")}}</div>
<p class="hidden">Источник этого интерактивного примера можно найти в репозитории на GitHub. Если Вы хотите посодействовать развитию проекта, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на включение кода.</p>
<p>Это свойство не влияет на однострочные flex-контейнеры (т.е. с <code>flex-wrap: nowrap</code>)</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="brush:css no-line-numbers notranslate">/* Основное позиционное выравнивание */
/* align-content не принимает значения left и right */
align-content: center; /* Расположить элементы вокруг центра */
align-content: start; /* Расположить элементы в начале */
align-content: end; /* Расположить элементы в конце */
align-content: flex-start; /* Расположить элементы flex в начале */
align-content: flex-end; /* Расположить элементы flex в конце */
/* Нормальное выравнивание */
align-content: normal;
/* Выравнивание по базовой линии */
align-content: baseline;
align-content: first baseline;
align-content: last baseline;
/* Распределённое выравнивание */
align-content: space-between; /* Распределить элементы равномерно
Первый элемент находится на одном уровне с началом,
последней - совпадает с концом */
align-content: space-around; /* Распределить элементы равномерно
Элементы имеют половинное пространство
на каждом конце */
align-content: space-evenly; /* Распределить элементы равномерно
Элементы имеют одинаковое пространство вокруг них */
align-content: stretch; /* Распределить элементы равномерно
Растянуть 'auto'-размерные элементы, чтобы заполнить
контейнер */
/* Выравнивание переполнения (overflow) */
align-content: safe center;
align-content: unsafe center;
/* Глобальные значения */
align-content: inherit;
align-content: initial;
align-content: unset;
</pre>
<h3 id="Значения">Значения</h3>
<dl>
<dt><code>start</code></dt>
<dd>Элементы расположены вплотную друг к другу, прижавшись к началу контейнера выравнивания по поперечной оси.</dd>
<dt><code>end</code></dt>
<dd>Элементы расположены вплотную друг к другу, прижавшись к концу контейнера выравнивания по поперечной оси.</dd>
<dt><code>flex-start</code></dt>
<dd>Элементы расположены вплотную друг к другу, прижавшись к краю контейнера выравнивания в зависимости от поперечной стороны начала (cross-start) контейнера flex.<br>
Это относится только к элементам макета flex. Для элементов, которые не являются потомками flex контейнера, это значение трактуется как <code>start</code>.</dd>
<dt><code>flex-end</code></dt>
<dd>Элементы расположены вплотную друг к другу, прижавшись к краю контейнера выравнивания в зависимости от поперечной стороны конца (cross-end) контейнера flex.<br>
Это относится только к элементам макета flex. Для элементов, которые не являются потомками flex контейнера, это значение трактуется как <code>end</code>.</dd>
<dt><code>center</code></dt>
<dd>Элементы расположены вплотную друг к другу в центре контейнера выравнивания по поперечной оси.</dd>
<dt><code>normal</code></dt>
<dd>Элементы расположены в их дефолтной позиции как если бы <code>align-content</code> не было определено.</dd>
<dt><code>baseline<br>
first baseline</code><br>
<code>last baseline</code></dt>
<dd><img alt="базовая линия - это линия, на которой «сидит» большинство букв и ниже которой располагаются нижние выносные элементы (свисания)." src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Typography_Line_Terms.svg/410px-Typography_Line_Terms.svg.png" style="height: 110px; width: 410px;"></dd>
<dd>Определяет участие в выравнивании первой или последней базовой линии: выравнивает базовую линию выравнивания первого или последнего базового набора блока с соответствующей базовой линией в общем первом или последнем базовом наборе всех блоков в его группе совместного использования базовой линии.<br>
Резервное выравнивание для <code>first baseline</code> равно <code>start</code>, для <code>last baseline</code> - <code>end</code>.</dd>
<dd><code>space-between</code></dd>
<dd>Элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних элементов одинаков. Первый элемент находится на одном уровне с начальной кромкой контейнера выравнивания на поперечной оси, а последний элемент находится на одном уровне с конечной кромкой контейнера выравнивания на поперечной оси.</dd>
<dt><code>space-around</code></dt>
<dd>Элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних предметов одинаков. Пустое пространство до первого и после последнего элемента равно половине пространства между каждой парой смежных элементов.</dd>
<dt><code>space-evenly</code></dt>
<dd>Элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних элементов, начальным краем и первым элементом, а также конечным краем и последним элементом абсолютно одинаков.</dd>
<dd><code>stretch</code></dd>
<dd>Если объединённый размер элементов вдоль поперечной оси меньше размера контейнера выравнивания, размер любого <code>auto</code>-размерного элемента увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемые {{cssxRef('max-height')}}/{{cssxRef('max-width')}} (или эквивалентной функциональности), так что объединённый размер точно заполняет контейнер выравнивания вдоль поперечной оси.</dd>
<dt><code>safe</code></dt>
<dd>Используется вместе с ключевым словом выравнивания. Если выбранное ключевое слово означает, что элемент переполняет контейнер выравнивания, что приводит к потере данных, вместо этого элемент выравнивается, как если бы режим выравнивания был <code>start</code>.</dd>
<dt><code>unsafe</code></dt>
<dd>Используется вместе с ключевым словом выравнивания. Независимо от относительных размеров элемента и контейнера выравнивания и от того, может ли произойти переполнение, которое приводит к потере данных, данное значение выравнивания учитывается.</dd>
</dl>
<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
{{csssyntax}}
<h2 id="Пример">Пример</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: css; highlight[4] notranslate">#container {
height:200px;
width: 240px;
align-content: center; /* Can be changed in the live sample */
background-color: #8c8c8c;
}
.flex {
display: flex;
flex-wrap: wrap;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, 50px);
}
div > div {
box-sizing: border-box;
border: 2px solid #8c8c8c;
width: 50px;
display: flex;
align-items: center;
justify-content: center;
}
#item1 {
background-color: #8cffa0;
min-height: 30px;
}
#item2 {
background-color: #a0c8ff;
min-height: 50px;
}
#item3 {
background-color: #ffa08c;
min-height: 40px;
}
#item4 {
background-color: #ffff8c;
min-height: 60px;
}
#item5 {
background-color: #ff8cff;
min-height: 70px;
}
#item6 {
background-color: #8cffff;
min-height: 50px;
font-size: 30px;
}
select {
font-size: 16px;
}
.row {
margin-top: 10px;
}
</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><div id="container" class="flex">
<div id="item1">1</div>
<div id="item2">2</div>
<div id="item3">3</div>
<div id="item4">4</div>
<div id="item5">5</div>
<div id="item6">6</div>
</div>
<div class="row">
<label for="display">display: </label>
<select id="display">
<option value="flex">flex</option>
<option value="grid">grid</option>
</select>
</div>
<div class="row">
<label for="values">align-content: </label>
<select id="values">
<option value="normal">normal</option>
<option value="stretch">stretch</option>
<option value="flex-start">flex-start</option>
<option value="flex-end">flex-end</option>
<option value="center" selected>center</option>
<option value="space-between">space-between</option>
<option value="space-around">space-around</option>
<option value="space-evenly">space-evenly</option>
<option value="start">start</option>
<option value="end">end</option>
<option value="left">left</option>
<option value="right">right</option>
<option value="baseline">baseline</option>
<option value="first baseline">first baseline</option>
<option value="last baseline">last baseline</option>
<option value="safe center">safe center</option>
<option value="unsafe center">unsafe center</option>
<option value="safe right">safe right</option>
<option value="unsafe right">unsafe right</option>
<option value="safe end">safe end</option>
<option value="unsafe end">unsafe end</option>
<option value="safe flex-end">safe flex-end</option>
<option value="unsafe flex-end">unsafe flex-end</option>
</select>
</div>
</pre>
<div class="hidden">
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js notranslate">var values = document.getElementById('values');
var display = document.getElementById('display');
var container = document.getElementById('container');
values.addEventListener('change', function (evt) {
container.style.alignContent = evt.target.value;
});
display.addEventListener('change', function (evt) {
container.className = evt.target.value;
});
</pre>
</div>
<h3 id="Результат">Результат</h3>
<p>{{EmbedLiveSample('Пример', 260, 290)}}</p>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS3 Box Alignment", "#propdef-align-content", "align-content")}}</td>
<td>{{Spec2("CSS3 Box Alignment")}}</td>
<td>Добавлены значения [ first | last ]? baseline, start, end, left, right, unsafe | safe.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Flexbox', '#align-content', 'align-content')}}</td>
<td>{{Spec2('CSS3 Flexbox')}}</td>
<td>Начальное определение</td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<div>{{CompatibilityTable}}</div>
<div>
<h3 id="Support_in_Flex_layout">Support in Flex layout</h3>
<p>{{Compat("css.properties.align-content.flex_context")}}</p>
<h3 id="Support_in_Grid_layout">Support in Grid layout</h3>
<p>{{Compat("css.properties.align-content.grid_context")}}</p>
</div>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li><a href="../../CSS/Using_CSS_flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Использование гибких блоков CSS</a></li>
</ul>