From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/justify-items/index.md | 237 +++++++++++++++----------------- 1 file changed, 109 insertions(+), 128 deletions(-) (limited to 'files/fr/web/css/justify-items') diff --git a/files/fr/web/css/justify-items/index.md b/files/fr/web/css/justify-items/index.md index 419349d270..74301a9778 100644 --- a/files/fr/web/css/justify-items/index.md +++ b/files/fr/web/css/justify-items/index.md @@ -7,25 +7,24 @@ tags: - Reference translation_of: Web/CSS/justify-items --- -
{{CSSRef}}
+{{CSSRef}} -

La propriété CSS justify-items 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).

+La propriété CSS **`justify-items`** 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). -
{{EmbedInteractiveExample("pages/css/justify-items.html")}}
+{{EmbedInteractiveExample("pages/css/justify-items.html")}} -

L'effet de cette propriété sera différent selon le type de disposition utilisé :

+L'effet de cette propriété sera différent selon le type de disposition utilisé : - +- Pour les dispositions de bloc : cette propriété aligne l'élément selon l'axe en ligne au sein du bloc englobant. +- 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. +- Pour les cellules de tableau, cette propriété est ignorée ([en savoir plus](/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_bloc_absolue_tableau)). +- Pour les dispositions flexibles (_flexbox_), cette propriété est ignorée ([en savoir plus](/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox)). +- Pour les grilles, cette propriété aligne l'élément sur la zone de la grille à laquelle il appartient selon l'axe en ligne ([en savoir plus](/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille)). -

Syntaxe

+## Syntaxe -
/* Mots-clés de base */
+```css
+/* Mots-clés de base */
 justify-items: auto;
 justify-items: normal;
 justify-items: stretch;
@@ -59,81 +58,76 @@ justify-items: legacy center;
 justify-items: inherit;
 justify-items: initial;
 justify-items: unset;
-
- -

Cette propriété peut être définie selon trois formes différentes :

- - - -

Valeurs

- -
-
auto
-
La valeur utilisée est celle de la propriété justify-items pour la boîte parente. Si la boîte n'a pas de parent ou est positionnée de façon absolue, auto sera synonyme de normal.
-
normal
-
Ce mot-clé aura un sens différent selon le mode de disposition utilisé : -
    -
  • Pour une disposition en bloc, normal est synonyme de start.
    • -
  • Pour les dispositions avec un positionnment absolu, ce mot-clé se comporte comme start pour les boîtes des éléments remplacés ou comme stretch pour les autres boîtes positionnées de façon absolue.
    • -
  • Pour les dispositions des cellules de tableaux, ce mot-clé n'a pas de signification car cette propriété est ignorée.
    • -
  • Pour les dispositions qui utilisent les boîtes flexibles, ce mot-clé n'a pas de signification car cette propriété est ignorée.
    • -
  • Pour les dispositions qui utilisent une grille, ce mot-clé aura un comportement proche de stretch, sauf pour les boîtes qui ont des dimensions intrinsèques, dans ce cas, il est synonyme de start.
    • -
-
-
start
-
Les éléments sont regroupés vers le début du conteneur pour l'axe en ligne.
-
end
-
Les éléments sont regroupés vers la fin du conteneur pour l'axe en ligne.
-
flex-start
-
Les éléments sont regroupés vers le début du conteneur flexible pour l'axe en ligne.
- 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 à start.
-
flex-end
-
Les éléments sont regroupés vers la fin du conteneur flexible pour l'axe en ligne.
- 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 à end.
-
self-start
-
Les éléments sont alignés sur le bord du conteneur au début de l'axe en ligne.
-
self-end
-
Les éléments sont alignés sur le bord du conteneur à la fin de l'axe en ligne.
-
center
-
Les éléments sont regroupés au centre du conteneur dans le sens de l'axe en ligne.
-
left
-
Les éléments sont alignés vers la gauche du conteneur dans le sens de l'axe en ligne.
-
right
-
Les éléments sont alignés vers la droite du conteneur dans le sens de l'axe en ligne.
-
baseline
- first baseline
- last baseline
-
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.
- Si first baseline n'est pas prise en charge, la valeur correspondra à start, si last baseline n'est pas prise en charge, la valeur correspondra à end.
-
stretch
-
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.
-
safe
-
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 start avait été utilisée.
-
unsafe
-
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.
-
legacy
-
La valeur est héritée par les éléments descendants de la boîte. Si un élément descendant a justify-self: auto, le mot-clé legacy ne sera pas pris en compte mais uniquement la valeur left, right, ou center.
-
- -

Syntaxe formelle

+``` + +Cette propriété peut être définie selon trois formes différentes : + +- Grâce à un mot-clé : `normal`, `auto` ou `stretch`. +- Relativement à la ligne de base : dans ce cas, on a le mot-clé `baseline` éventuellement suivi de `first` ou de `last` +- Grâce à un positionnement : + + - Un mot-clé parmi : `center`, `start`, `end`, `flex-start`, `flex-end`, `self-start`, `self-end`, `left` ou `right` + - Puis éventuellement `safe` ou `unsafe` + +- Grâce à un alignement tel que précédemment spécifié : le mot-clé` legacy` suivi de `left` ou de `right`. + +### Valeurs + +- `auto` + - : La valeur utilisée est celle de la propriété `justify-items` pour la boîte parente. Si la boîte n'a pas de parent ou est positionnée de façon absolue, `auto` sera synonyme de `normal`. +- `normal` + + - : Ce mot-clé aura un sens différent selon le mode de disposition utilisé : + + - Pour une disposition en bloc, `normal` est synonyme de `start`. + - Pour les dispositions avec un positionnment absolu, ce mot-clé se comporte comme `start` pour les boîtes des éléments remplacés ou comme `stretch` pour les autres boîtes positionnées de façon absolue. + - Pour les dispositions des cellules de tableaux, ce mot-clé n'a pas de signification car cette propriété est ignorée. + - Pour les dispositions qui utilisent les boîtes flexibles, ce mot-clé n'a pas de signification car cette propriété est ignorée*.* + - Pour les dispositions qui utilisent une grille, ce mot-clé aura un comportement proche de `stretch`, sauf pour les boîtes qui ont des dimensions intrinsèques, dans ce cas, il est synonyme de `start`. + +- `start` + - : Les éléments sont regroupés vers le début du conteneur pour l'axe en ligne. +- `end` + - : Les éléments sont regroupés vers la fin du conteneur pour l'axe en ligne. +- `flex-start` + - : Les éléments sont regroupés vers le début du conteneur flexible pour l'axe en ligne. + 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 à `start`. +- `flex-end` + - : Les éléments sont regroupés vers la fin du conteneur flexible pour l'axe en ligne. + 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 à `end`. +- `self-start` + - : Les éléments sont alignés sur le bord du conteneur au début de l'axe en ligne. +- `self-end` + - : Les éléments sont alignés sur le bord du conteneur à la fin de l'axe en ligne. +- `center` + - : Les éléments sont regroupés au centre du conteneur dans le sens de l'axe en ligne. +- `left` + - : Les éléments sont alignés vers la gauche du conteneur dans le sens de l'axe en ligne. +- `right` + - : Les éléments sont alignés vers la droite du conteneur dans le sens de l'axe en ligne. +- `baseline first baseline` + `last baseline` + - : 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. + Si `first baseline` n'est pas prise en charge, la valeur correspondra à `start`, si `last baseline` n'est pas prise en charge, la valeur correspondra à `end`. +- `stretch` + - : 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. +- `safe` + - : 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 `start` avait été utilisée. +- `unsafe` + - : 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. +- `legacy` + - : La valeur est héritée par les éléments descendants de la boîte. Si un élément descendant a `justify-self: auto`, le mot-clé `legacy` ne sera pas pris en compte mais uniquement la valeur `left`, `right`, ou `center`. + +### Syntaxe formelle {{CSSSyntax}} -

Exemples

+## Exemples -

CSS

+### CSS - +``` -
.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 100px);
   grid-template-rows: repeat(3,100px);
@@ -176,59 +171,45 @@ justify-items: unset;
 .item4 {
   grid-area: d;
 }
-
+``` -

HTML

+### 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>
-
+```html +
+
Objet 1
+
Objet 2
+
Objet 3
+
Objet 4
+
+``` -

Résultat

+### Résultat -

{{EmbedLiveSample('Exemples', '500', '500')}}

+{{EmbedLiveSample('Exemples', '500', '500')}} -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box Alignment", "#propdef-justify-items", "justify-items")}}{{Spec2("CSS3 Box Alignment")}}Définition initiale.
+| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName("CSS3 Box Alignment", "#propdef-justify-items", "justify-items")}} | {{Spec2("CSS3 Box Alignment")}} | Définition initiale. | -

{{CSSInfo}}

+{{CSSInfo}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

Prise en charge pour les dispositions flexibles

+### Prise en charge pour les dispositions flexibles -

{{Compat("css.properties.justify-items.flex_context")}}

+{{Compat("css.properties.justify-items.flex_context")}} -

Prise en charge pour les grilles CSS

+### Prise en charge pour les grilles CSS -

{{Compat("css.properties.justify-items.grid_context")}}

+{{Compat("css.properties.justify-items.grid_context")}} -

Voir aussi

+## Voir aussi - +- [L'alignement des boîtes avec les grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS) +- La propriété {{cssxref("justify-self")}} +- [Le module de spécification CSS Box Alignment](/fr/docs/Web/CSS/CSS_Box_Alignment) +- La propriété raccourcie {{CSSxRef("place-items")}} +- La propriété {{CSSxRef("align-items")}} -- cgit v1.2.3-54-g00ecf