path: root/files/ru/web/css/align-content/index.html

---
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 &gt; 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">&lt;div id="container" class="flex"&gt;
  &lt;div id="item1"&gt;1&lt;/div&gt;
  &lt;div id="item2"&gt;2&lt;/div&gt;
  &lt;div id="item3"&gt;3&lt;/div&gt;
  &lt;div id="item4"&gt;4&lt;/div&gt;
  &lt;div id="item5"&gt;5&lt;/div&gt;
  &lt;div id="item6"&gt;6&lt;/div&gt;
&lt;/div&gt;

&lt;div class="row"&gt;
  &lt;label for="display"&gt;display: &lt;/label&gt;
  &lt;select id="display"&gt;
    &lt;option value="flex"&gt;flex&lt;/option&gt;
    &lt;option value="grid"&gt;grid&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;

&lt;div class="row"&gt;
  &lt;label for="values"&gt;align-content: &lt;/label&gt;
  &lt;select id="values"&gt;
    &lt;option value="normal"&gt;normal&lt;/option&gt;
    &lt;option value="stretch"&gt;stretch&lt;/option&gt;
    &lt;option value="flex-start"&gt;flex-start&lt;/option&gt;
    &lt;option value="flex-end"&gt;flex-end&lt;/option&gt;
    &lt;option value="center" selected&gt;center&lt;/option&gt;
    &lt;option value="space-between"&gt;space-between&lt;/option&gt;
    &lt;option value="space-around"&gt;space-around&lt;/option&gt;
    &lt;option value="space-evenly"&gt;space-evenly&lt;/option&gt;

    &lt;option value="start"&gt;start&lt;/option&gt;
    &lt;option value="end"&gt;end&lt;/option&gt;
    &lt;option value="left"&gt;left&lt;/option&gt;
    &lt;option value="right"&gt;right&lt;/option&gt;

    &lt;option value="baseline"&gt;baseline&lt;/option&gt;
    &lt;option value="first baseline"&gt;first baseline&lt;/option&gt;
    &lt;option value="last baseline"&gt;last baseline&lt;/option&gt;

    &lt;option value="safe center"&gt;safe center&lt;/option&gt;
    &lt;option value="unsafe center"&gt;unsafe center&lt;/option&gt;
    &lt;option value="safe right"&gt;safe right&lt;/option&gt;
    &lt;option value="unsafe right"&gt;unsafe right&lt;/option&gt;
    &lt;option value="safe end"&gt;safe end&lt;/option&gt;
    &lt;option value="unsafe end"&gt;unsafe end&lt;/option&gt;
    &lt;option value="safe flex-end"&gt;safe flex-end&lt;/option&gt;
    &lt;option value="unsafe flex-end"&gt;unsafe flex-end&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;
</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>