From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/place-items/index.html | 281 ++++++++++++++++++++++++++++++++ 1 file changed, 281 insertions(+) create mode 100644 files/fr/web/css/place-items/index.html (limited to 'files/fr/web/css/place-items/index.html') diff --git a/files/fr/web/css/place-items/index.html b/files/fr/web/css/place-items/index.html new file mode 100644 index 0000000000..b9a2608334 --- /dev/null +++ b/files/fr/web/css/place-items/index.html @@ -0,0 +1,281 @@ +--- +title: place-items +slug: Web/CSS/place-items +tags: + - CSS + - Propriété + - Propriété raccourcie + - Reference +translation_of: Web/CSS/place-items +--- +
{{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.

+ +
{{EmbedInteractiveExample("pages/css/place-items.html")}}
+ + + +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+place-items: auto center;
+place-items: normal start;
+
+/* Alignement géométrique */
+place-items: center normal;
+place-items: start auto;
+place-items: end normal;
+place-items: self-start auto;
+place-items: self-end normal;
+place-items: flex-start auto;
+place-items: flex-end normal;
+place-items: left auto;
+place-items: right normal;
+
+/* Alignement par rapport à la ligne de base */
+place-items: baseline normal;
+place-items: first baseline auto;
+place-items: last baseline normal;
+place-items: stretch auto;
+
+/* Valeurs globales */
+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

+ +
{{CSSSyntax}}
+ +

Exemples

+ +

CSS

+ +
#container {
+  height:200px;
+  width: 240px;
+  place-items: center; /* Cette valeur peut être modifiée dans l'exemple */
+  background-color: #8c8c8c;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid {
+  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

+ + -- cgit v1.2.3-54-g00ecf