diff options
Diffstat (limited to 'files/fr/web/css/justify-items')
| -rw-r--r-- | files/fr/web/css/justify-items/index.html | 242 |
1 files changed, 242 insertions, 0 deletions
diff --git a/files/fr/web/css/justify-items/index.html b/files/fr/web/css/justify-items/index.html new file mode 100644 index 0000000000..862d8e697c --- /dev/null +++ b/files/fr/web/css/justify-items/index.html @@ -0,0 +1,242 @@ +--- +title: justify-items +slug: Web/CSS/justify-items +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/justify-items +--- +<div>{{CSSRef}}</div> + +<p>La propriété CSS <strong><code>justify-items</code></strong> définit la valeur par défaut de {{cssxref("justify-self")}} pour tous les éléments d'une boîte et permet ainsi de définir le comportement par défaut pour la justification des éléments d'une boîte le long de l'axe en ligne (c'est-à-dire l'axe correspondant au sens d'écriture).</p> + +<div>{{EmbedInteractiveExample("pages/css/justify-items.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<p>L'effet de cette propriété sera différent selon le type de disposition utilisé :</p> + +<ul> + <li>Pour les dispositions de bloc : cette propriété aligne l'élément selon l'axe en ligne au sein du bloc englobant.</li> + <li>Pour les éléments positionnés de façon absolue : cette propriété aligne l'élément selon l'axe en ligne au sein du bloc englobant en prenant en compte les valeurs de décalage par rapport au haut, à la gauche, au bas et à la droite.</li> + <li>Pour les cellules de tableau, cette propriété est ignorée (<a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_bloc_absolue_tableau">en savoir plus</a>).</li> + <li>Pour les dispositions flexibles (<em>flexbox</em>), cette propriété est ignorée (<a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox">en savoir plus</a>).</li> + <li>Pour les grilles, cette propriété aligne l'élément sur la zone de la grille à laquelle il appartient selon l'axe en ligne (<a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille">en savoir plus</a>).</li> +</ul> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush:css no-line-numbers">/* Mots-clés de base */ +justify-items: auto; +justify-items: normal; +justify-items: stretch; + +/* Alignement par rapport à l'axe */ +justify-items: center; /* Les éléments sont regroupés au centre */ +justify-items: start; /* Les éléments sont regroupés au début */ +justify-items: end; /* Les éléments sont regroupés à la fin */ +justify-items: flex-start; /* Les éléments sont regroupés au début de l'axe */ +justify-items: flex-end; /* Les éléments sont regroupés à la fin de l'axe */ +justify-items: self-start; +justify-items: self-end; +justify-items: left; /* Les éléments sont regroupés à gauche */ +justify-items: right; /* Les éléments sont regroupés à droite */ + +/* Alignement par rapport à la ligne de base */ +justify-items: baseline; +justify-items: first baseline; +justify-items: last baseline; + +/* Gestion du dépassement */ +justify-items: safe center; +justify-items: unsafe center; + +/* Valeurs historiques */ +justify-items: legacy right; +justify-items: legacy left; +justify-items: legacy center; + +/* Valeurs globales */ +justify-items: inherit; +justify-items: initial; +justify-items: unset; +</pre> + +<p>Cette propriété peut être définie selon trois formes différentes :</p> + +<ul> + <li>Grâce à un mot-clé : <code>normal</code>, <code>auto</code> ou <code>stretch</code>.</li> + <li>Relativement à la ligne de base : dans ce cas, on a le mot-clé <code>baseline</code> éventuellement suivi de <code>first</code> ou de <code>last</code></li> + <li>Grâce à un positionnement : + <ul> + <li>Un mot-clé parmi : <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> ou <code>right</code></li> + <li>Puis éventuellement <code>safe</code> ou <code>unsafe</code></li> + </ul> + </li> + <li>Grâce à un alignement tel que précédemment spécifié : le mot-clé<code> legacy</code> suivi de <code>left</code> ou de <code>right</code>.</li> +</ul> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>La valeur utilisée est celle de la propriété <code>justify-items</code> pour la boîte parente. Si la boîte n'a pas de parent ou est positionnée de façon absolue, <code>auto</code> sera synonyme de <code>normal</code>.</dd> + <dt><code>normal</code></dt> + <dd>Ce mot-clé aura un sens différent selon le mode de disposition utilisé : + <ul> + <li>Pour une disposition en bloc, <code>normal</code> est synonyme de <code>start</code>.</li> + <li>Pour les dispositions avec un positionnment absolu, ce mot-clé se comporte comme <code>start</code> pour les boîtes des éléments remplacés ou comme <code>stretch</code> pour les autres boîtes positionnées de façon absolue.</li> + <li>Pour les dispositions des cellules de tableaux, ce mot-clé n'a pas de signification car cette propriété est ignorée.</li> + <li>Pour les dispositions qui utilisent les boîtes flexibles, ce mot-clé n'a pas de signification car cette propriété est ignorée<em>.</em></li> + <li>Pour les dispositions qui utilisent une grille, ce mot-clé aura un comportement proche de <code>stretch</code>, sauf pour les boîtes qui ont des dimensions intrinsèques, dans ce cas, il est synonyme de <code>start</code>.</li> + </ul> + </dd> + <dt><code>start</code></dt> + <dd>Les éléments sont regroupés vers le début du conteneur pour l'axe en ligne.</dd> + <dt><code>end</code></dt> + <dd>Les éléments sont regroupés vers la fin du conteneur pour l'axe en ligne.</dd> + <dt><code>flex-start</code></dt> + <dd>Les éléments sont regroupés vers le début du conteneur flexible pour l'axe en ligne.<br> + Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à <code>start</code>.</dd> + <dt><code>flex-end</code></dt> + <dd>Les éléments sont regroupés vers la fin du conteneur flexible pour l'axe en ligne.<br> + Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à <code>end</code>.</dd> + <dt><code>self-start</code></dt> + <dd>Les éléments sont alignés sur le bord du conteneur au début de l'axe en ligne.</dd> + <dt><code>self-end</code></dt> + <dd>Les éléments sont alignés sur le bord du conteneur à la fin de l'axe en ligne.</dd> + <dt><code>center</code></dt> + <dd>Les éléments sont regroupés au centre du conteneur dans le sens de l'axe en ligne.</dd> + <dt><code>left</code></dt> + <dd>Les éléments sont alignés vers la gauche du conteneur dans le sens de l'axe en ligne.</dd> + <dt><code>right</code></dt> + <dd>Les éléments sont alignés vers la droite du conteneur dans le sens de l'axe en ligne.</dd> + <dt><code>baseline<br> + first baseline</code><br> + <code>last baseline</code></dt> + <dd>Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.<br> + Si <code>first baseline</code> n'est pas prise en charge, la valeur correspondra à <code>start</code>, si <code>last baseline</code> n'est pas prise en charge, la valeur correspondra à <code>end</code>.</dd> + <dt><code>stretch</code></dt> + <dd>Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en ligne, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.</dd> + <dt><code>safe</code></dt> + <dd>Si la taille de l'élément dépasse du conteneur pour la valeur d'alignement indiquée, l'élément est alors aligné comme si la valeur <code>start</code> avait été utilisée.</dd> + <dt><code>unsafe</code></dt> + <dd>Quelle que soit la taille de l'élément par rapport au conteneur (il peut dépasser), la valeur fournie pour indiquer l'alignement est respectée.</dd> + <dt><code>legacy</code></dt> + <dd>La valeur est héritée par les éléments descendants de la boîte. Si un élément descendant a <code>justify-self: auto</code>, le mot-clé <code>legacy</code> ne sera pas pris en compte mais uniquement la valeur <code>left</code>, <code>right</code>, ou <code>center</code>.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{CSSSyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<div id="alignment_8"> +<div class="hidden"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3,100px); + height: 500px; + width: 500px; + grid-gap: 10px; + grid-template-areas: + "a a b" + "a a b" + "c d d"; + align-content: space-between; + justify-items: start; +} +.item1 { + grid-area: a; +} +.item2 { + grid-area: b; +} +.item3 { + grid-area: c; +} +.item4 { + grid-area: d; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="wrapper"> + <div class="item1">Objet 1</div> + <div class="item2">Objet 2</div> + <div class="item3">Objet 3</div> + <div class="item4">Objet 4</div> +</div> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample('Exemples', '500', '500')}}</p> +</div> + +<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 Box Alignment", "#propdef-justify-items", "justify-items")}}</td> + <td>{{Spec2("CSS3 Box Alignment")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{CSSInfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3> + +<p>{{Compat("css.properties.justify-items.flex_context")}}</p> + +<h3 id="Prise_en_charge_pour_les_grilles_CSS">Prise en charge pour les grilles CSS</h3> + +<p>{{Compat("css.properties.justify-items.grid_context")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">L'alignement des boîtes avec les grilles CSS</a></li> + <li>La propriété {{cssxref("justify-self")}}</li> + <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li> + <li>La propriété raccourcie {{CSSxRef("place-items")}}</li> + <li>La propriété {{CSSxRef("align-items")}}</li> +</ul> |