La propriété raccourcie place-content permet de définir les valeurs des propriétés align-content et justify-content. Elle peut être utilisée pour n'importe quelle méthode de disposition (boîtes flexibles, grilles, etc;) qui prend en charge ces deux propriétés d'alignement.

Syntaxe

/* Valeurs décrivant l'alignement */ 
/* Note : align-content ne gère pas les valeurs left et right */
place-content: center start;  
place-content: start center; 
place-content: end left; 
place-content: flex-start center;
place-content: flex-end center; 

/* Valeurs décrivant l'alignement par rapport à la ligne de base */ 
/* Note : justify-content ne gère pas les valeurs liées à la ligne de base */
place-content: baseline center; 
place-content: first baseline space-evenly; 
place-content: last baseline right;

/* Valeurs décrivant la distribution de l'alignment */
place-content: space-between space-evenly; 
place-content: space-around space-evenly;
place-content: space-evenly stretch; 
place-content: stretch space-evenly; 

/* Valeurs globales */ 
place-content: inherit; 
place-content: initial; 
place-content: unset;

La première valeur utilisée sera celle qui correspond à align-content et la seconde valeur correspondra à justify-content. Si la deuxième valeur n'est pas présente, la première valeur indiquée sera également utilisée pour justify-content.

Attention ! Si une seule valeur est fournie et que celle-ci est invalide pour l'une ou l'autre des propriétés détaillées, c'est la déclaration entière qui sera invalide.

Valeurs

start
Les éléments sont alignés vers le début du conteneur pour l'axe correspondant.
end
Les éléments sont alignés vers la fin du conteneur pour l'axe correspondant.
flex-start
Les éléments sont alignés vers le début du conteneur flexible pour l'axe correspondant. Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas des éléments d'un conteneur flexible, cette valeur sera synonyme de start.
flex-end
Les éléments sont alignés vers la fin du conteneur flexible pour l'axe correspondant. Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas des éléments d'un conteneur flexible, cette valeur sera synonyme de end.
center
Les éléments sont alignés au centre du conteneur dans l'axe correspondant.
left
Les éléments sont alignés vers le bord gauche du conteneur dans l'axe correspondant. Si l'axe de cette propriété n'est pas parallèle à l'axe en ligne (inline axis), cette valeur sera synonyme de start.
right
Les éléments sont alignés vers le bord droit du conteneur dans l'axe correspondant. Si l'axe de cette propriété n'est pas parallèle à l'axe en ligne (inline axis), cette valeur sera synonyme de start.
space-between
Les éléments sont équirépartis dans le conteneur sur l'axe correspondant. Ainsi, l'espace entre chaque élément adjacent sera le même. Le premier élément est aligné sur le bord du conteneur et le dernier élément est également aligné sur le bord du conteneur à la fin de l'axe.
baseline
first baseline

last baseline
Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
The fallback alignment for first baseline is start, the one for last baseline is end.
space-around
Les éléments sont équirépartis dans le conteneur sur l'axe correspondant. L'espace entre chaque élément adjacent sera le même. L'espace entre le bord du conteneur et le premier élément sera la moitié de l'espace utilisé entre chaque élément. L'espace entre le dernier élément et le bord du conteneur sera la moitié de l'espace utilisé entre chaque élément.
space-evenly
Les éléments sont équirépartis dans le conteneur sur l'axe correspondant. L'espace entre chaque élément adjacent sera le même, ce sera également cet espace qui sera utilisé entre le bord du conteneur et le premier élément et entre le dernier élément et le bord du conteneur.
stretch
Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe correspondant, tous les éléments dimensionnés automatiquement seront étirés de la même façon (et pas de façon proportionnelle) tout en respectant les contraintes imposées par max-height/max-width (ou par les fonctionnalités équivalentes) afin que la taille de l'ensemble des éléments soit exactement celle du conteneur.

Syntaxe formelle

<'align-content'> <'justify-content'>?

Exemples

CSS

#container {
  display: flex;
  height:240px;
  width: 240px;
  flex-wrap: wrap;
  background-color: #8c8c8c;
  writing-mode: horizontal-tb; /* Cette valeur peut être modifiée dans l'exemple */
  direction: ltr; /* Cette valeur peut être modifiée dans l'exemple */
  place-content: flex-end center; /* Cette valeur peut être modifiée dans l'exemple */
}

div > div {
  border: 2px solid #8c8c8c;
  width: 50px;
  background-color: #a0c8ff;
}

.small {
  font-size: 12px;
  height: 40px;
}

.large {
  font-size: 14px;
  height: 50px;
}

HTML

<div id="container">
  <div class="small">Lorem</div>
  <div class="small">Lorem<br/>ipsum</div>
  <div class="large">Lorem</div>
  <div class="large">Lorem<br/>impsum</div>
  <div class="large"></div>
  <div class="large"></div>
</div>

Résultat

Spécifications

Spécification État Commentaires
CSS Box Alignment Module Level 3
La définition de 'place content' dans cette spécification.
Version de travail Définition initiale.

Valeur initialenormal
Applicabilitéconteneurs flexibles multi-lignes
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Supported in Flex LayoutChrome Support complet 59Edge Aucun support NonFirefox Support complet OuiIE Aucun support NonOpera Support complet OuiSafari Support complet OuiWebView Android Support complet 59Chrome Android Support complet 59Edge Mobile ? Firefox Android Support complet OuiOpera Android Support complet OuiSafari iOS ? Samsung Internet Android Support complet 7.0
Supported in Grid LayoutChrome Support complet 59Edge Aucun support NonFirefox Support complet 53IE Aucun support NonOpera Support complet OuiSafari Support complet OuiWebView Android Support complet 59Chrome Android Support complet 59Edge Mobile ? Firefox Android Support complet 53Opera Android Support complet OuiSafari iOS ? Samsung Internet Android Support complet 7.0
You can only specify a single value if it is valid for both align-content and justify-contentChrome Support complet OuiEdge Aucun support NonFirefox Support complet 60IE Aucun support NonOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile ? Firefox Android Support complet 60Opera Android ? Safari iOS ? Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue

Prise en charge pour les dispositions flexibles

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 59Edge Aucun support NonFirefox Support complet OuiIE Aucun support NonOpera Support complet OuiSafari Support complet OuiWebView Android Support complet 59Chrome Android Support complet 59Edge Mobile ? Firefox Android Support complet OuiOpera Android Support complet OuiSafari iOS ? Samsung Internet Android Support complet 7.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue

Prise en charge pour les grilles

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 59Edge Aucun support NonFirefox Support complet 53IE Aucun support NonOpera Support complet OuiSafari Support complet OuiWebView Android Support complet 59Chrome Android Support complet 59Edge Mobile ? Firefox Android Support complet 53Opera Android Support complet OuiSafari iOS ? Samsung Internet Android Support complet 7.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,