Propriété de style alignContent
Exemple
Positionnez les éléments de l'élément flexible <div> avec un espace entre les lignes :
document.getElementById("main").style.alignContent = "space-between";
Définition et utilisation
La propriété alignContent aligne les éléments du conteneur flexible lorsque les éléments n'utilisent pas tout l'espace disponible sur l'axe transversal (verticalement).
Astuce : Utilisez la propriété JustifyContent pour aligner les éléments sur l'axe principal (horizontalement).
Remarque : Il doit y avoir plusieurs lignes d'éléments pour que cette propriété ait un effet.
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Les nombres suivis de Webkit spécifient la première version qui a fonctionné avec un préfixe.
Property | |||||
---|---|---|---|---|---|
alignContent | 21.0 | 11.0 | 28.0 | 9.0 7.0 Webkit |
12.1 |
Syntaxe
Renvoyez la propriété alignContent :
object.style.alignContent
Définissez la propriété alignContent :
object.style.alignContent = "stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit"
Valeurs de propriété
Value | Description |
---|---|
stretch | Default value. Items are stretched to fit the container |
center | Items are positioned at the center of the container |
flex-start | Items are positioned at the beginning of the container |
flex-end | Items are positioned at the end of the container |
space-between | Items are positioned with space between the lines |
space-around | Items are positioned with space before, between, and after the lines |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Détails techniques
Valeur par défaut: | s'étirer |
---|---|
Valeur de retour : | Une chaîne, représentant la propriété align-content d'un élément |
Version CSS | CSS3 |
Pages connexes
Référence CSS : propriété align-content
Référence HTML DOM STYLE : propriété alignItems
Référence HTML DOM STYLE : propriété alignSelf
Référence HTML DOM STYLE : propriété JustContent