Place-content - Propriété CSS

place-content

Résumé des caractéristiques de la propriété place-content

Description rapide
Disposition des éléments dans un flex-box ou une grille.
Statut
Standard
Utilisable sur
HTML
Valeurs prédéfinies
normal | start | center | end | flex-start | flex-end | space-around | space-between | space-evenly | stretch | break40 | baseline | first baseline | last baseline
Pourcentages
Ne s'appliquent pas.
Valeur initiale
normal
Héritée par défaut
Non.
Type d'animation
Discrète : lors d'une animation, la propriété place-content passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Alignement des blocs
Références (W3C)
Statut du document: WD (document de travail)

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 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.

  • place-content: flex-start;

    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.

  • 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.

1
2
3
4
5

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.

place-content :
  1  
2
3
4
  5  
6

Compatibilité des navigateurs avec place-content.

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

Colonne 1
Support de la propriété place-content dans le contexte d'un conteneur flex-box.
Colonne 2
Support de la propriété place-content dans le contexte d'un conteneur grille.
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

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.
    WD
    12 Juin 2012
    Document de travail.
    CR
    PR
    REC

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.

Propriétés :

align-content
Gère la disposition des éléments dans un flex-box ou une grille, suivant l'axe secondaire.
align-items
Disposition verticale des éléments dans un flex-box ou une grille.
align-self
Position verticale de l'un des éléments dans un flex-box ou une grille.
column-gap
Définit l'espacement entre les colonnes.
gap
Définit les espacements entre les lignes et entre les colonnes dans le contexte d'une grille, d'un flex-box, ou d'une mise en page sur plusieurs colonnes)
grid-column-gap
Spécifie l'espacement entre les colonnes dans une grille.
grid-gap
Ajuste l'espacement des lignes et des colonnes dans le contexte d'une grille.
grid-row-gap
Spécifie l'espacement entre les lignes dans une grille.
justify-content
Définit le positionnement suivant l'axe principal dans un flex-box ou une grille.
justify-items
Gère l'alignement horizontal des éléments dans un conteneur grille.
justify-self
Définit le positionnement horizontal d'un élément particulier dans un flex-box ou une grille.
place-items
Défini le placement des éléments dans leur cellule (dans le contexte d'une grille).
place-self
Définit l'alignement d'un élément aussi bien dans la direction inline que dans la direction block.
row-gap
Définit l'espace entre les lignes d'une grille.