Attribut alignContent du style

Définition et utilisation

Lorsque les éléments n'utilisent pas tout l'espace disponible sur l'axe horizontal (verticale),alignContent Aligner les éléments du conteneur flexible à l'aide de l'attribut.

Aide :Utilisez Attribut justifyContent Aligner les éléments sur l'axe principal (horizontale).

Remarque :Il doit y avoir plusieurs lignes d'éléments pour que cette propriété fonctionne.

Exemple

Placez les éléments du <div> flexible entre les lignes avec de l'espace :

document.getElementById("main").style.alignContent = "space-between";

Essayez-le vous-même

Syntaxe

Retourner alignContent propriété :

Object.style.alignContent

Définir alignContent propriété :

Object.style.alignContent = "stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit"

Valeur de l'attribut

Valeur Description
Stretch Valeur par défaut. Les lignes s'étirent pour occuper l'espace restant.
Center Les éléments sont situés au centre du conteneur.
Flex-start Les éléments sont situés au début du conteneur.
Flex-end Les éléments sont situés à la fin du conteneur.
Space-between Les éléments sont situés entre les lignes avec de l'espace.
Space-around Les lignes avant, entre et après l'élément laissent de l'espace blanc.
Initial Régler cette propriété à sa valeur par défaut. Voir Initial.
Inherited Inherits this property from its parent element. Voir Inherited.

Détails techniques

Valeur par défaut : Stretch
Valeur de retour : Chaîne, représentant l'élément Align-content propriété.
Version CSS : CSS3

Support du navigateur

alignContent C'est une caractéristique CSS3 (1999).

Tous les navigateurs le supportent complètement :

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Support Support Support Support Support 11

Pages associées

Manuel de référence CSS :Align-content propriété

Manuel de style DOM HTML :AlignItems propriété

Manuel de style DOM HTML :AlignSelf propriété

Manuel de style DOM HTML :Attribut justifyContent