---
title: Атрибут justify-items
slug: Web/CSS/justify-items
tags:
  - CSS
  - CSS атрибут
  - CSS выравнивание блоков
  - Ссылки
translation_of: Web/CSS/justify-items
---
<div class="boxed translate-rendered text-content">
<div>{{CSSRef}}</div>

<p>Атрибут <a href="https://developer.mozilla.org/ru/docs/Web/CSS">CSS</a> <code><strong>justify-items</strong></code> определяет атрибут по умолчанию {{CSSxRef ("justify-self")}} для всех элементов блока, предоставляя всем им способ выравнивания по умолчанию каждого блока вдоль соответствующей оси.</p>

<div>{{EmbedInteractiveExample("pages/css/justify-items.html")}}</div>

<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, создайте копию <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на включение изменений.</p>

<p>Эффект этого атрибута зависит от выбранного способа разметки:</p>

<ul>
 <li>Используя разметку с помощью блоков (block-level layout), элементы выравниваются внутри содержащего их блока по внутренней оси.</li>
 <li>Для абсолютно позиционированых элементов выравнивание происходит внутри содержащего их блока по внутренней оси, учитывая значения смещения сверху, слева, снизу и справа.</li>
 <li>Используя разметку с помощью ячеек таблицы (table cell layout), этот атрибут игнорируется (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables">подробнее</a> о выравнивании в блочной структуре, абсолютном позиционировании и о табличной разметке).</li>
 <li>Используя разметку с помощью гибких или адаптивных блоков (flexbox layout), этот атрибут игнорируется (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">подробнее</a> о выравнивании в разметке flexbox).</li>
 <li>Используя разметку с помощью сетки (grid layout), элементы выравниваются внутри их сеточной области по внутренней оси (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">подробнее</a> о выравнивании в разметке grid).</li>
</ul>

<h2 id="Синтаксис">Синтаксис</h2>

<pre class="brush:css no-line-numbers">/* Основные ключевые слова */
justify-items: auto;
justify-items: normal;
justify-items: stretch;

/* Выравнивание положения */
justify-items: center;     /* Выровнять элементы по центру */
justify-items: start;      /* Выровнять элементы в начале */
justify-items: end;        /* Выровнять элементы в конце */
justify-items: flex-start; /* Эквивалентно 'start'. Обратите внимание, что justify-items игнорируется в разметке Flexbox. */
justify-items: flex-end;   /* Эквивалентно 'end'. Обратите внимание, что justify-items игнорируется в разметке Flexbox. */
justify-items: self-start;
justify-items: self-end;
justify-items: left;       /* Выровнять элементы по левому краю */
justify-items: right;      /* Выровнять элементы по правому краю */

/* Исходное выравнивание */
justify-items: baseline;
justify-items: first baseline;
justify-items: last baseline;

/* Выравнивание при переполнении (только для выравнивания положения) */
justify-items: safe center;
justify-items: unsafe center;

/* Унаследованное выравнивание */
justify-items: legacy right;
justify-items: legacy left;
justify-items: legacy center;

/* Глобальные значения */
justify-items: inherit;
justify-items: initial;
justify-items: unset;
</pre>

<p>Этот атрибут может принимать одну из четырёх различных форм:</p>

<ul>
 <li>Основные ключевые слова: одно из значений ключевого слова: <code>normal</code>, <code>auto</code>, или <code>stretch</code>.</li>
 <li>Исходное выравнивание: ключевое слово <code>baseline</code>  плюс одно ключевое слово по выбору: <code>first</code> или <code>last</code>.</li>
 <li>Выравнивание положения: одно из ключевых слов: <code>center</code>, <code>start</code>, <code>end</code>, <code>flex-start</code>, <code>flex-end</code>, <code>self-start</code>, <code>self-end</code>, <code>left</code>, или <code>right</code>. Плюс ключевое слово по выбору: <code>safe</code> или <code>unsafe</code>.</li>
 <li>Унаследованное выравнивание: ключевое слово <code>legacy</code>, за которым следует ключевое слово <code>left</code> или <code>right</code>.</li>
</ul>

<h3 id="Значения">Значения</h3>

<dl>
 <dt><code>auto</code></dt>
 <dd>Используемое значение является значением атрибута <code>justify-items</code> родительского блока. Если у блока нет родительского элемента или он абсолютно спозиционирован, то в этих случаях значение <code>auto</code> представляет собой значение <code>normal</code>.</dd>
 <dt><code>normal</code></dt>
 <dd>Эффект этого атрибута зависит от выбранного способа разметки:
 <ul>
  <li>Используя разметку с помощью блоков (block-level layout), это ключевое слово является синонимом слова <code>start</code></li>
  <li>Для разметки с абсолютно позиционированный элементами, это ключевое слово ведёт себя как <code>start</code> на заменённых блоках с абсолютным позиционированием и как <code>stretch</code> на всех остальных блоках с абсолютным позиционированием</li>
  <li>Используя разметку с помощью ячеек таблицы (table cell layout), это ключевое слово не имеет значения, так как этот атрибут <em>игнорируется</em></li>
  <li>Используя разметку с помощью гибких блоков (flexbox layout), это ключевое слово не имеет значения, так как этот атрибут <em>игнорируется</em></li>
  <li>Используя разметку с помощью сетки (grid layout), это ключевое слово приводит к поведению, аналогичному поведению <code>stretch</code>, за исключением блоков с соотношением сторон или внутренних размеров, где оно ведёт себя как <code>start</code></li>
 </ul>
 </dd>
 <dt><code>start</code></dt>
 <dd>Элемент выравнивается на одном уровне друг с другом по направлению к начальной границе контейнера выравнивания по соответствующей оси.</dd>
 <dt><code>end</code></dt>
 <dd>Элемент выравнивается на одном уровне друг с другом по направлению к конечной границе  контейнера выравнивания по соответствующей оси.</dd>
 <dt><code>flex-start</code></dt>
 <dd>Для элементов, которые не являются потомками flex контейнера, это значение обрабатывается как <code>start</code>.</dd>
 <dt><code>flex-end</code></dt>
 <dd>Для элементов, которые не являются потомками flex контейнера, это значение обрабатывается как <code>end</code>.</dd>
 <dt><code>self-start</code></dt>
 <dd>Элемент выравнивается на одном уровне с границей контейнера выравнивания начальной стороны элемента по соответствующей оси.</dd>
 <dt><code>self-end</code></dt>
 <dd>Элемент выравнивается на одном уровне с границей контейнера выравнивания конечной стороны элемента по соответствующей оси.</dd>
 <dt><code>center</code></dt>
 <dd>Элементы выравниваются на одном уровне друг с другом по направлению к центру контейнера выравнивания.</dd>
 <dt><code>left</code></dt>
 <dd>Элементы выравниваются на одном уровне друг с другом по направлению к левой границе контейнера выравнивания. Если ось свойства не параллельна внутренней оси, это значение ведёт себя как <code>start</code>.</dd>
 <dt><code>right</code></dt>
 <dd>Элементы выравниваются на одном уровне друг с другом по направлению к правой границе контейнера выравнивания по соответствующей оси. Если ось свойства не параллельна внутренней оси, это значение ведёт себя как <code>start</code>.</dd>
 <dt><code>baseline<br>
 first baseline</code><br>
 <code>last baseline</code></dt>
 <dd>Определяет участие значений <code>first baseline</code> или <code>last baseline</code> в исходном выравнивании. Значение <code>baseline</code> выравнивает первый или последний блок набора в соответствии с исходным выравниванием в общем первом или последнем наборе всех блоков в его совместной группе исходного выравнивания.</dd>
 <dd>Возвратным выравниванием для <code>first baseline</code> является значение <code>start</code>, для <code>last baseline</code> является значение <code>end</code>.</dd>
 <dt><code>stretch</code></dt>
 <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>
 <dt><code>legacy</code></dt>
 <dd>Создаёт значение, унаследованное потомками блока. Обратите внимание, что если потомок имеет значение <code>justify-self: auto</code>, ключевое слово <code>legacy</code> не учитывается по нисходящему наследованию. Действует только со значением <code>left</code>, <code>right</code>, или <code>center</code>, связанным с ним.</dd>
</dl>

<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>

{{CSSSyntax}}

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th>Спецификация</th>
   <th>Статус</th>
   <th>Комментарий</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS3 Box Alignment", "#propdef-justify-items", "justify-items")}}</td>
   <td>{{Spec2("CSS3 Box Alignment")}}</td>
   <td>Первоначальное определение</td>
  </tr>
 </tbody>
</table>

<p>{{CSSInfo}}</p>

<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<h3 id="Поддержка_в_разметке_Flex">Поддержка в разметке Flex</h3>

<p>{{Compat}}</p>

<h3 id="Поддержка_в_разметке_Grid">Поддержка в разметке Grid</h3>

<p>{{Compat("css.properties.justify-items.grid_context")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>CSS Руководство по Grid: <em><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Выравнивание блоков в разметке Grid</a></em></li>
 <li><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Alignment">CSS Выравнивание блоков</a></li>
 <li>Сокращённый атрибут {{CSSxRef("place-items")}}</li>
 <li>Атрибут {{CSSxRef("justify-self")}}</li>
 <li>Атрибут {{CSSxRef("align-items")}}</li>
</ul>
</div>