Place-items - Propriété CSS

Description de la propriété place-items.

place-items est une propriété résumée qui permet de définir en une seule fois les propriétés align-items et justify-items. Autrement dit, place-items gère le positionnement complet des éléments dans leur cellule, aussi bien suivant l'axe principal, que suivant l'axe secondaire. place-items doit être appliquée sur le conteneur grille : il agit sur tous les éléments de la grille.

Pour plus de détails sur les valeurs acceptées par place-items, reportez-vous aux propriétés détaillées align-items et justify-items.

Valeurs pour place-items.

• place-items: end start;

  Deux valeurs séparées par un espace : la première valeur et affectée à la propriété align-items, et la deuxième à la valeur justify-items. Sur cet exemple, la propriété align-items est donc définie à la valeur end et la propriété justify-items à la valeur start.

• place-items: center;

  Une seule valeur indiquée : les propriétés align-items et justify-items sont toutes les deux définies à la même valeur, ici à la valeur center.
  Attention cependant avec cette syntaxe car certaines valeurs ne sont valides que pour l'une des deux propriétés.

• place-items: initial; place-items: inherit; place-items: revert; place-items: revertLayer; place-items: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de place-items.

Avec un peu d'imagination il est certainement possible de trouver un effet visuel intéressant en animant la propriété place-items. La transition entre les valeurs se fait de façon brutale puisqu'il s'agit de valeurs non numériques, impossibles à interpoler.

Exemple interactif avec la propriété place-items.

Le simulateur travaille sur un grille (ci-dessous). Une valeur unique est appliquée à place-items : elle sera donc valable pour les deux propriétés dont place-items est le résumé : align-items et justify-items.

Remarque : le valeurs flex-start et flex-end sont acceptées, bien que le conteneur soit ici une grille. Elles sont traitées comme les valeurs start et end.

Compatibilité des navigateurs avec place-items.

Tous les navigateurs actuels traitent bien la propriété place-items.

1

Propriété
place-items
(flex-box)

2

Propriété
place-items
(grille)

Estimation de la prise en charge globale.

95%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

Chrome

Firefox

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire de la propriété place-items.

• Module CSS - Alignement des blocs - Niveau 3

  Contrairement à ce qu'on pouvait attendre le propriété place-items. n'est pas décrite dans le modèle sur les flex-box mais dans ce module sur l'alignement des blocs.
  

  12 Juin 2012

  Document de travail.

  

  

  

Voir aussi, au sujet du placement des blocs.

Les spécifications CSS concernant les flex-box sont regroupés dans un module spécifique, mais place-items est décrit dans le module CSS Box Alignment Module. Vous y trouverez également toutes les autres propriétés relatives au placement des blocs.

Propriétés :