Exemple
Paquet lignes vers le centre du récipient flexible:
div
{
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: center;
}
Essayez - le vous - même » Définition et utilisation
La propriété align-contenu modifie le comportement de la propriété flex-wrap. Il est similaire à aligner-éléments, mais au lieu d'aligner les éléments flexibles, il aligne les lignes flexibles.
Astuce: Utilisez le justifier-contenu propriété pour aligner les éléments sur l'axe principal (horizontally) .
Note: Il doit y avoir plusieurs lignes d'articles pour cette propriété d'avoir un quelconque effet.
| Valeur par défaut: | stretch |
|---|---|
| Hérité: | no |
| Animable: | no. Read about animatable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object .style.alignContent="center" Try it |
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
Numbers suivis par -webkit- spécifient la première version qui a travaillé avec un préfixe.
| Propriété | |||||
|---|---|---|---|---|---|
| align-content | 21,0 | 11.0 | 28,0 | 9.0 7,0 -webkit- | 12.1 |
Syntaxe CSS
align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;propriété valeurs
| Valeur | La description | Joue-le |
|---|---|---|
| stretch | Valeur par défaut. Lignes étirer pour prendre l'espace restant | Joue-le " |
| center | Les lignes sont conditionnées vers le centre du récipient flexible | Joue-le " |
| flex-start | Les lignes sont emballés vers le début du conteneur flexible | Joue-le " |
| flex-end | Les lignes sont emballés vers l'extrémité du récipient flexible | Joue-le " |
| space-between | Les lignes sont réparties uniformément dans le récipient flexible | Joue-le " |
| space-around | Les lignes sont uniformément réparties dans le conteneur souple, avec des espaces de demi-taille sur les deux extrémités | Joue-le " |
| initial | Définit cette propriété à sa valeur par défaut. Lisez à propos initial | Joue-le " |
| inherit | Hérite cette propriété de son élément parent. Lisez à propos de hériteront |
Pages associées
Référence CSS: la align-items property
CSS Référence: align-self property
CSS Référence: justify-content property
Référence HTML DOM: alignContent property