place-content - Propriété CSS
Résumé des caractéristiques de la propriété place-content
normal | start | center | end | flex-start | flex-end | space-around | space-between | space-evenly | stretch | break40 | baseline | first baseline | last baselinenormalplace-content passe d'une valeur à l'autre sans transition.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.
Syntaxes pour place-content.
- place-content: flex-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 pourjustify-content. Sur cet exemple, la propriétéalign-contentest définie à la valeurflex-startet la propriétéjustify-contentà la valeurcenter. - place-content: flex-start;
Une seule valeur indiquée : les propriétés
align-contentetjustify-contentsont toutes les deux définies à la même valeur, ici à la valeurflex-start.
Attention cependant avec cette syntaxe car certaines valeurs ne sont valides que pour l'une des deux propriétés. - place-content:
initial; place-content:inherit; place-content:revert; place-content:revert-layer; place-content:unset;La valeur initiale est :
normal
Animation de la propriété 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.
Simulateur.
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.
Prise en charge par les navigateurs (compatibilité).
Tous les navigateurs actuels traitent bien la propriété place-content.
place-content dans le contexte d'un conteneur flex.
place-content dans le contexte d'un conteneur grille.
place-content(Flex-box)
place-content(Grid)
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que place-content.
Les spécifications CSS éditées par le W3C sont organisées en modules. place-content fait partie du Module CSS - Alignement des blocs (CSS Box Alignment Module). Les définitions suivantes sont également décrites dans ce même module.