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/place-items/index.md | 301 ++++++++++++++++------------------ 1 file changed, 144 insertions(+), 157 deletions(-) (limited to 'files/fr/web/css/place-items/index.md') diff --git a/files/fr/web/css/place-items/index.md b/files/fr/web/css/place-items/index.md index c5b670ba70..247057a5d2 100644 --- a/files/fr/web/css/place-items/index.md +++ b/files/fr/web/css/place-items/index.md @@ -8,15 +8,16 @@ tags: - Reference translation_of: Web/CSS/place-items --- -
{{CSSRef}}
+{{CSSRef}} -

La propriété raccourcie place-items définit les valeurs utilisées pour les propriétés {{cssxref("align-items")}} et {{cssxref("justify-items")}}. La première valeur fournie est utilisée pour align-items et la seconde est utilisée pour justify-items. S'il n'y a pas de seconde valeur fournie, c'est la première qui est reprise pour justify-items.

+La propriété raccourcie **`place`\*\***`-items`\*\* définit les valeurs utilisées pour les propriétés {{cssxref("align-items")}} et {{cssxref("justify-items")}}. La première valeur fournie est utilisée pour `align-items` et la seconde est utilisée pour `justify-items`. S'il n'y a pas de seconde valeur fournie, c'est la première qui est reprise pour `justify-items`. -
{{EmbedInteractiveExample("pages/css/place-items.html")}}
+{{EmbedInteractiveExample("pages/css/place-items.html")}} -

Syntaxe

+## Syntaxe -
/* Valeurs avec un mot-clé */
+```css
+/* Valeurs avec un mot-clé */
 place-items: auto center;
 place-items: normal start;
 
@@ -41,61 +42,59 @@ place-items: stretch auto;
 place-items: inherit;
 place-items: initial;
 place-items: unset;
-
- -

Valeurs

- -
-
auto
-
La valeur utilisée est celle de justify-items pour l'élément parent sauf si l'élément n'a pas de parent ou qu'il est positionné de façon absolue auquel cas auto sera synonyme de normal.
-
normal
-
L'effet de ce mot-clé depend du mode de disposition utilisé : -
    -
  • Pour les dispositions en bloc, ce mot-clé est synonyme de start.
    • -
  • Pour les dispositions absolues, ce mot-clé se comporte comme start pour les éléments remplacés ou comme stretch pour tous les autres éléments.
    • -
  • Pour les cellules de tableaux, ce mot-clé n'a pas de sens et cette propriété est ignorée.
    • -
  • Pour les dispositions utilisant des boîtes flexibles, ce mot-clé n'a pas de sens et cette propriété est ignorée.
    • -
  • Pour les dispositions en grille, ce mot-clé se comporte comme stretch sauf pour les éléments qui ont des dimensions intrinsèques ou des contraintes de ratio, auquel cas cette valeur est synonyme de start.
    • -
-
-
start
-
L'élément est aligné au début de l'axe dans la direction correspondante.
-
end
-
L'élément est aligné à la fin de l'axe dans la direction correspondante.
-
flex-start
-
Les éléments sont regroupés vers le début du conteneur flexible pour l'axe correspondant.
- 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 correspondant.
- 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 de leur boîte vers le début de l'axe correspondant.
-
self-end
-
Les éléments sont alignés sur le bord de leur boîte vers la fin de l'axe correspondant.
-
center
-
L'élément est centré le long de l'axe correspondant.
-
left
-
L'élément est aligné sur le bord gauche du conteneur. Si l'axe de la propriété n'est pas parallèle à l'axe en ligne, cette valeur se comporte comme start.
-
right
-
L'élément est aligné sur le bord droit du conteneur. Si l'axe de la propriété n'est pas parallèle à l'axe en ligne, cette valeur se comporte comme start.
-
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, 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.
-
- -

Syntaxe formelle

+``` + +### Valeurs + +- `auto` + - : La valeur utilisée est celle de `justify-items` pour l'élément parent sauf si l'élément n'a pas de parent ou qu'il est positionné de façon absolue auquel cas `auto` sera synonyme de `normal`. +- `normal` + + - : L'effet de ce mot-clé depend du mode de disposition utilisé : + + - Pour les dispositions en bloc, ce mot-clé est synonyme de `start`. + - Pour les dispositions absolues, ce mot-clé se comporte comme `start` pour les éléments remplacés ou comme `stretch` pour tous les autres éléments. + - Pour les cellules de tableaux, ce mot-clé n'a pas de sens et cette propriété est ignorée. + - Pour les dispositions utilisant des boîtes flexibles, ce mot-clé n'a pas de sens et cette propriété est ignorée*.* + - Pour les dispositions en grille, ce mot-clé se comporte comme `stretch` sauf pour les éléments qui ont des dimensions intrinsèques ou des contraintes de ratio, auquel cas cette valeur est synonyme de `start`. + +- `start` + - : L'élément est aligné au début de l'axe dans la direction correspondante. +- `end` + - : L'élément est aligné à la fin de l'axe dans la direction correspondante. +- `flex-start` + - : Les éléments sont regroupés vers le début du conteneur flexible pour l'axe correspondant. + 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 correspondant. + 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 de leur boîte vers le début de l'axe correspondant. +- `self-end` + - : Les éléments sont alignés sur le bord de leur boîte vers la fin de l'axe correspondant. +- `center` + - : L'élément est centré le long de l'axe correspondant. +- `left` + - : L'élément est aligné sur le bord gauche du conteneur. Si l'axe de la propriété n'est pas parallèle à l'axe en ligne, cette valeur se comporte comme `start`. +- `right` + - : L'élément est aligné sur le bord droit du conteneur. Si l'axe de la propriété n'est pas parallèle à l'axe en ligne, cette valeur se comporte comme `start`. +- `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, 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. + +### Syntaxe formelle {{CSSSyntax}} -

Exemples

+## Exemples -

CSS

+### CSS -
#container {
+```css
+#container {
   height:200px;
   width: 240px;
   place-items: center; /* Cette valeur peut être modifiée dans l'exemple */
@@ -111,9 +110,10 @@ place-items: unset;
   display: grid;
   grid-template-columns: repeat(auto-fill, 50px);
 }
-
+``` - - - - - - -

Résultat

- -

{{EmbedLiveSample("Exemples", 260, 290)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box Alignment", "#place-items-property", "place-items")}}{{Spec2('CSS3 Box Alignment')}}Définition initiale.
- -

{{CSSInfo}}

- -

Compatibilité des navigateurs

- -

Prise en charge pour les dispositions flexibles

- -

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

- -

Prise en charge pour les grilles

- -

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

- -

Voir aussi

- - +``` + +### Résultat + +{{EmbedLiveSample("Exemples", 260, 290)}} + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName("CSS3 Box Alignment", "#place-items-property", "place-items")}} | {{Spec2('CSS3 Box Alignment')}} | Définition initiale. | + +{{CSSInfo}} + +## Compatibilité des navigateurs + +### Prise en charge pour les dispositions flexibles + +{{Compat("css.properties.place-items.flex_context")}} + +### Prise en charge pour les grilles + +{{Compat("css.properties.place-items.grid_context")}} + +## Voir aussi + +- Guide sur les grilles : _[Aligner des objets dans une grille](/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS)_ +- Guide sur les boîtes flexibles : _[Les concepts de bases](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox)_ +- Guide sur les boîtes flexibles : _[Aligner des objets dans un conteneur flexible](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible)_ +- [Le module de spécification CSS Box Alignment](/fr/docs/Web/CSS/CSS_Box_Alignment) +- Les propriétés détaillées correspondantes : + + - {{cssxref("align-items")}} + - {{cssxref("justify-items")}} + +- {{cssxref("justify-self")}} +- {{cssxref("align-self")}} -- cgit v1.2.3-54-g00ecf