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 baseline
normal
place-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
.
Valeurs 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-content
est définie à la valeurflex-start
et la propriétéjustify-content
à la valeurcenter
. - place-content: flex-start;
Une seule valeur indiquée : les propriétés
align-content
etjustify-content
sont 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; (
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
.
place-content
dans le contexte d'un conteneur flex-box.place-content
dans le contexte d'un conteneur grille.place-content
(flex-box)
place-content
(grille)
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
Histoire de la propriété place-content
.
-
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 2012Document 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
CSS Box Alignment Module. Vous y trouverez également toutes les autres propriétés relatives au placement des blocs.