initial commit

1 files changed, 171 insertions, 0 deletions

diff --git a/files/ru/web/css/justify-items/index.html b/files/ru/web/css/justify-items/index.html
new file mode 100644
index 0000000000..23d4c75099
--- /dev/null
+++ b/files/ru/web/css/justify-items/index.html
@@ -0,0 +1,171 @@
+---
+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 notranslate">/* Основные ключевые слова */
+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>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<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>
+
+<div class="hidden">Таблица совместимости на этой странице формируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на включение изменений.</div>
+
+<h3 id="Поддержка_в_разметке_Flex">Поддержка в разметке Flex</h3>
+
+<p>{{Compat("css.properties.justify-items.flex_context")}}</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>