1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
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>
{{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>
<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>
|
