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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
|
---
title: justify-content
slug: Web/CSS/justify-content
tags:
- CSS
- justify-content
translation_of: Web/CSS/justify-content
---
<div>{{CSSRef}}</div>
<p><a href="/ru/docs/Web/CSS">CSS</a> свойство <strong><code>justify-content</code></strong> определяет, как браузер распределяет пространство между и вокруг элементов контента вдоль {{Glossary("Main Axis", "главной оси")}} flex контейнера, или вдоль строчной оси grid контейнера.</p>
<p>Интерактивный пример ниже демонстрирует некоторые значения, используя Grid размещение.</p>
<p>{{EmbedInteractiveExample("pages/css/justify-content.html")}}</p>
<p>Выравнивание выполняется после того, как применяются длины и автоматические поля, что означает, что если во <a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox разметке</a> есть хотя бы один flex-элемент, с {{cssxref("flex-grow")}} отличным от <code>0</code>, эффект не будет применен, потому что не останется свободного места.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="brush:css no-line-numbers notranslate">/* Позиционное выравнивание */
justify-content: center; /* Выравнивание элементов по центру */
justify-content: start; /* Выравнивание элементов в начале */
justify-content: end; /* Выравнивание элементов в конце */
justify-content: flex-start; /* Выравнивание флекс-элементов с начала */
justify-content: flex-end; /* Выравнивание флекс-элементов с конца */
justify-content: left; /* Выравнивание элементов по левому краю */
justify-content: right; /* Выравнивание элементов по правому краю */
/* Выравнивание относительно осевой линии */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;
/* Распределенное выравнивание */
justify-content: space-between; /* Равномерно распределяет все элементы по ширине flex-блока.
Первый элемент вначале, последний в конце */
justify-content: space-around; /* Равномерно распределяет все элементы по ширине flex-блока.
Все элементы имеют полуразмерное пространство
с обоих концов */
justify-content: space-evenly; /* Равномерно распределяет все элементы по ширине flex-блока.
Все элементы имеют равное пространство вокруг */
justify-content: stretch; /* Равномерно распределяет все элементы по ширине flex-блока.
Все элементы имеют "авто-размер", чтобы соответствовать
контейнеру */
/* Выравнивание при переполнении */
justify-content: safe center;
justify-content: unsafe center;
/* Глобальные значения */
justify-content: inherit;
justify-content: initial;
justify-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>Элементы располагаются друг за другом и прижимаются к началу контейнера по главной оси, в зависимости от её направления (<a href="/ru/docs/Web/CSS/flex-direction">flex-direction</a>). Для элементов, которые не являются дочерними элементами flex контейнера, это значение обрабатывается как <code>start</code>.</dd>
<dt><code>flex-end</code></dt>
<dd>Элементы располагаются друг за другом и прижимаются к концу контейнера по главной оси, в зависимости от её направления (<a href="/ru/docs/Web/CSS/flex-direction">flex-direction</a>). Для элементов, которые не являются дочерними элементами flex контейнера, это значение обрабатывается как <code>end</code>.</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>normal</code></dt>
<dd>Элементы располагаются на свох обычных позициях, так как будто свойство <code>justify-content</code> не задано. Этот параметр ведет себя как <code>stretch</code> в grid и flex контейнерах.</dd>
<dt><code>baseline<br>
first baseline</code><br>
<code>last baseline</code></dt>
<dd>Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.<br>
The fallback alignment for <code>first baseline</code> is <code>start</code>, the one for <code>last baseline</code> is <code>end</code>.</dd>
<dt><code>space-between</code></dt>
<dd>Элементы равномерно распределены вдоль главной оси контейнера. Расстояния между каждой парой соседних элементов равны. Первый элемент прижат к началу контейнера по главной оси, а последний - к концу.</dd>
<dt><code>space-around</code></dt>
<dd>Элементы равномерно распределены вдоль главной оси контейнера. Расстояния между каждой парой соседних элементов равны. Пустые пространства перед первым элементом и после последнего элемента равны половине расстояния между парами соседних элементов.</dd>
<dt><code>space-evenly</code></dt>
<dd>Элементы равномерно распределены вдоль главной оси контейнера. Расстояния между каждой парой соседних элементов равны расстояниям от начала контейнера до первого элемента и от последнего элемента до конца контейнера.</dd>
<dt><code>stretch</code></dt>
<dd>If the combined size of the items is less than the size of the alignment container, any <code>auto</code>-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by {{cssxref("max-height")}}/{{cssxref("max-width")}} (or equivalent functionality), so that the combined size exactly fills the alignment container along the main axis.</dd>
</dl>
<div class="blockIndicator note">
<p><strong>Примечание:</strong> <code>stretch</code> не поддерживается гибкими контейнерами (flexbox).</p>
</div>
<dl>
<dt><code>safe</code></dt>
<dd>If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were <code>start</code>.</dd>
<dt><code>unsafe</code></dt>
<dd>Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.</dd>
</dl>
<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
{{csssyntax}}
<h2 id="Пример">Пример</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: css notranslate">#container {
display: flex;
justify-content: space-between; /* Может быть изменено */
}
#container > div {
width: 100px;
height: 100px;
background: linear-gradient(-45deg, #788cff, #b4c8ff);
}
</pre>
<div class="hidden">
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><div id="container">
<div></div>
<div></div>
<div></div>
</div>
<select id="justifyContent">
<option value="start">start</option>
<option value="end">end</option>
<option value="flex-start">flex-start</option>
<option value="flex-end">flex-end</option>
<option value="center">center</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="space-between" selected>space-between</option>
<option value="space-around">space-around</option>
<option value="space-evenly">space-evenly</option>
<option value="stretch">stretch</option>
</select></pre>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js notranslate">var justifyContent = document.getElementById("justifyContent");
justifyContent.addEventListener("change", function (evt) {
document.getElementById("container").style.justifyContent =
evt.target.value;
});
</pre>
</div>
<h3 id="Результат">Результат</h3>
<p>{{EmbedLiveSample("Пример", "100%", 140)}}</p>
<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-content', 'justify-content')}}</td>
<td>{{Spec2('CSS3 Box Alignment')}}</td>
<td>Adds the [ first | last ]? baseline, self-start, self-end, start, end, left, right, space-evenly, unsafe | safe values.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Flexbox', '#propdef-justify-content', 'justify-content')}}</td>
<td>{{Spec2('CSS3 Flexbox')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<h3 id="Поддержка_в_Flex_разметке">Поддержка в Flex разметке</h3>
<p>{{Compat("css.properties.justify-content.flex_context")}}</p>
<h3 id="Поддержка_в_Grid_разметке">Поддержка в Grid разметке</h3>
<p>{{Compat("css.properties.justify-content.grid_context")}}</p>
<h2 id="Смотрите_также"> Смотрите также</h2>
<ul>
<li>Гид по CSS Flexbox: <em><a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Основные понятия Flexbox</a></em></li>
<li>CSS Flexbox Guide: <em><a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Выравнивание_элементов_в_Flex_контейнере">Выравнивание элементов во Flex контейнере</a></em></li>
<li>CSS Grid Guide: <em><a href="/ru/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Выравнивание ячейки в CSS Grid layout</a></em></li>
<li><a href="/ru/docs/Web/CSS/CSS_Box_Alignment">Выравнивание полей CSS</a></li>
</ul>
|
