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
|
---
title: justify-content
slug: Web/CSS/justify-content
tags:
- CSS
- Propriété
- Reference
- flexbox
translation_of: Web/CSS/justify-content
---
<div>{{CSSRef}}</div>
<p>La propriété CSS <strong><code>justify-content</code></strong> indique la façon dont l'espace doit être réparti entre et autour des éléments selon <a href="/fr/docs/Web/CSS/CSS_Box_Alignment#Concepts_majeurs_et_terminologie">l'axe principal</a> d'un conteneur flexible ou selon l'axe en ligne lorsque le conteneur est une grille.</p>
<p>L'exemple suivant illustre le fonctionnement des valeurs de cette propriété au sein d'une grille CSS.</p>
<div>{{EmbedInteractiveExample("pages/css/justify-content.html")}}</div>
<p>L'alignement est appliqué après que les longueurs et les marges automatiques ont été appliquées. Dans une disposition utilisant les boîtes flexibles, cela signifie que s'il existe au moins un élément flexible pour lequel {{cssxref("flex-grow")}} est différent de <code>0</code>, <code>justify-content</code> n'aura aucun effet car il n'y aura plus d'espace disponible.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush:css no-line-numbers">/* Alignement « géométrique » */
justify-content: center; /* Éléments groupés au centre */
justify-content: start; /* Éléments groupés au début */
justify-content: end; /* Éléments groupés à la fin */
justify-content: flex-start; /* Éléments flexibles groupés au début */
justify-content: flex-end; /* Éléments flexibles groupés à la fin */
justify-content: left; /* Éléments groupés à gauche */
justify-content: right; /* Éléments groupés à droite */
/* Alignement par rapport à la ligne de base */
/* justify-content ne prend pas de valeurs relatives à la ligne de base */
/* Alignement normal */
justify-content: normal;
/* Alignement distribué */
justify-content: space-between; /* Les éléments sont répartis équitablement
Le bord du premier est aligné sur le
début du conteneur et la fin du dernier
est alignée sur la fin du conteneur */
justify-content: space-around; /* Les éléments sont répartis équitablement
À chaque extrémité, entre le bord du
conteneur et le premier/dernier élément
on a la moitié de l'espace appliqué entre
chaque élément */
justify-content: space-evenly; /* Les éléments sont répartis équitablement
Tous les éléments sont séparés par le même
espace */
justify-content: stretch; /* Les éléments sont répartis équitablement et
les éléments dimensionnés avec 'auto' sont
étirés afin de remplir le conteneur */
/* Alignement pour le dépassement */
justify-content: safe center;
justify-content: unsafe center;
/* Valeurs globales */
justify-content: inherit;
justify-content: initial;
justify-content: unset;
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>start</code></dt>
<dd>Les éléments sont regroupés au début du conteneur selon l'axe principal. Le bord du premier élément est aligné avec le bord du conteneur.</dd>
<dt><code>end</code></dt>
<dd>Les éléments sont regroupés à la fin du conteneur selon l'axe principal. Le bord du dernier élément est aligné avec le bord du conteneur.</dd>
<dt><code>flex-start</code></dt>
<dd>Les éléments sont regroupés vers le début du conteneur, selon l'axe principal et le sens du conteneur flexible.<br>
Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas dans un conteneur flexible, cette valeur est synonyme de <code>start</code>.</dd>
<dt><code>flex-end</code></dt>
<dd>Les éléments sont regroupés vers la fin du conteneur, selon l'axe principal et le sens du conteneur flexible.<br>
Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas dans un conteneur flexible, cette valeur est synonyme de <code>end</code>.</dd>
<dt><code>center</code></dt>
<dd>Les éléments sont regroupés au centre du conteneur selon l'axe principal.</dd>
<dt><code>left</code></dt>
<dd>Les éléments sont regroupés vers le bord gauche du conteneur. Si l'axe n'est pas parallèle à l'axe en ligne, cette valeur est synonyme de <code>start</code>.</dd>
<dt><code>right</code></dt>
<dd>Les éléments sont regroupés vers le bord droit du conteneur. Si l'axe n'est pas parallèle à l'axe en ligne, cette valeur est synonyme de <code>start</code>.</dd>
<dt><code>normal</code></dt>
<dd>Les éléments sont groupés sur leur position par défaut, comme si <code>justify-content</code> n'avait pas été utilisé. Cette valeur se comporte comme <code>stretch</code> dans les conteneurs de grille et les conteneurs flexibles.</dd>
<dt><code>space-between</code></dt>
<dd>Les éléments ont espacés équitablement selon l'axe principal. L'espace utilisé entre chaque élément est le même. Le premier élément est aligné sur le bord du conteneur et le dernier élément est aussi aligné sur le bord de l'élément.</dd>
<dt><code>space-around</code></dt>
<dd>Les éléments ont espacés équitablement selon l'axe principal. L'espace utilisé entre chaque élément est le même. L'espace entre le bord du conteneur et le premier élément et l'espace entre le dernier élément et le bord du conteneur représente la moitié de l'espace entre deux éléments.</dd>
<dt><code>space-evenly</code></dt>
<dd>Les éléments sont espacés équitablement. L'espace utilisé entre chaque élément, entre le bord du conteneur et le premier élément, et entre le dernier élément et le bord du conteneur est le même.</dd>
<dt><code>stretch</code></dt>
<dd>Si la somme des tailles des éléments sur l'axe principal est inférieure à la taille du conteneur, tous les éléments dimensionnés avec <code>auto</code> sont agrandis avec le même supplément, tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités analogues). Ainsi, l'ensemble des éléments remplit exactement le conteneur sur l'axe principal.<br>
La valeur <code>stretch</code> n'est pas prise en charge pour les boîtes flexibles (<em>flexbox</em>)</dd>
<dt><code>safe</code></dt>
<dd>Cette valeur doit être utilisée avec un mot-clé pour l'alignement. Si le mot-clé choisi indique que le dépassement de l'objet entraîne la perte de donnée, alors l'élément sera plutôt aligné avec la valeur <code>start</code>.</dd>
<dt><code>unsafe</code></dt>
<dd>Cette valeur doit être utilisée avec un mot-clé pour l'alignement. Quelle que soit la situation de dépassement ou les contraintes de taille, la valeur utilisée pour l'alignement est respectée.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">#container {
display: flex;
/* Cette valeur peut être changée dans l'exemple */
justify-content: space-between;
}
#container > div {
width: 100px;
height: 100px;
background: linear-gradient(-45deg, #788cff, #b4c8ff);
}
</pre>
<pre class="brush: html hidden"><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>
<pre class="brush: js hidden">var justifyContent = document.getElementById("justifyContent");
justifyContent.addEventListener("change", function (evt) {
document.getElementById("container").style.justifyContent =
evt.target.value;
});
</pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample("Exemples", "100%", 140)}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th>Spécification</th>
<th>État</th>
<th>Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Flexbox', '#propdef-justify-content', 'justify-content')}}</td>
<td>{{Spec2('CSS3 Flexbox')}}</td>
<td>Définition initiale.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Box Alignment', '#propdef-justify-content', 'justify-content')}}</td>
<td>{{Spec2('CSS3 Box Alignment')}}</td>
<td>Ajout des valeurs <code>space-evenly, [ first | last ]? baseline</code>, <code>start</code>, <code>end</code>, <code>left</code>, <code>right</code>, <code>safe</code> et <code>unsafe</code>.</td>
</tr>
</tbody>
</table>
<div>{{cssinfo}}</div>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>
<p>{{Compat("css.properties.justify-content.flex_context")}}</p>
<h3 id="Prise_en_charge_pour_les_grilles">Prise en charge pour les grilles</h3>
<p>{{Compat("css.properties.justify-content.grid_context")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
<li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></em></li>
<li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner des objets dans une grille</a></em></li>
<li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
</ul>
|
