Place-content - Propriété CSS

Description de la propriété place-content.

place-content est une propriété résumée qui permet de définir en une seule règle les propriétés align-content et justify-content. Autrement dit, place-content gère le positionnement complet des éléments dans un flex-box ou dans une grille, aussi bien suivant l'axe principal, que suivant l'axe secondaire.

place-content doit être appliqué sur le conteneur flex ou à le conteneur grille.

Pour plus de détails sur les valeurs acceptées par place-content, reportez-vous aux propriétés détaillées align-content et justify-content. Et, pour rappel, l'axe principal et l'axe secondaire d'un flex-box sont définis par flex-direction.

Autres propriétés à connaître.

Ces propriétés concernent toutes le positionnement des éléments dans une grille.

Valeurs pour place-content.

• place-content: start center;

  Deux valeurs séparées par un espace : la première valeur correspond à la propriété align-content, et la deuxième est la valeur pour justify-content. Sur cet exemple, la propriété align-content est définie à la valeur flex-start et la propriété justify-content à la valeur center.

  Grille
  place-content:start center;
• place-content: end;

  Une seule valeur indiquée : les propriétés align-content et justify-content sont toutes les deux définies à la même valeur, ici à la valeur flex-start.
  Attention cependant avec cette syntaxe car certaines valeurs ne sont valides que pour l'une des deux propriétés. Dans ce cas la deuxième propriété est mise à sa valeur initiale.

  Grille
  place-content:end;
• place-content: initial; (normal) place-content: inherit; place-content: revert; place-content: revertLayer; place-content: unset;

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

Exemple d'animation de place-content.

La propriété place-content peut être animée. La transition d'une valeur à l'autre se fait brutalement puisqu'il s'agit de valeurs non numériques, qui ne peuvent donc pas être interpolées.

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

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

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

Compatibilité des navigateurs avec place-content.

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

1

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

2

Propriété
place-content
(grille)

Estimation de la prise en charge globale.

95%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

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

Caniuse

Caniuse

Histoire de la propriété place-content.

• Module CSS - Alignement des blocs - Niveau 3

  Concernant place-content. 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-content est décrit dans le module Module CSS - Alignement des blocs. Vous y trouverez également toutes les autres propriétés relatives au placement des blocs.

Propriétés :