manuel de référence CSS

règle CSS (RULES)

大全 des propriétés CSS

CSS3 align-Méthode d'utilisation et exemple de l'attribut content

Description

align-Lorsque l'il y a de l'espace supplémentaire sur l'axe horizontal (verticalement), l'attribut CSS peut aligner les éléments du conteneur élastique dans le conteneur élastique. Cet attribut n'a pas d'effet sur le conteneur élastique monoligne. De plus, vous pouvez utiliser CSS justify-contentAligne les éléments sur l'axe principal horizontal.

Le tableau suivant résume l'utilisation et l'historique des versions de cette propriété.

Valeur par défaut :	stretch
Appliqué à :	Conteneur élastique multiligne
Héritage :	Aucun
Animable :	Non.Voir également Attribut d'animation。
Version CSS :	CSS3nouvelle fonction
Syntaxe JavaScript :	object.style.alignContent="center"

align-Syntaxe d'utilisation de content

La syntaxe de cette propriété est la suivante :

align-content: center | flex-start | flex-end | space-between | space-around | stretch | initial | inherit

Les exemples suivants montrent comment utiliser l'alignement CSS :-l'attribut content.

Exemple

　.flex-container {
　　　　　　　　　　　/*　Navigateur Safari　*/
　　　　　　　　　　　display:　-Préfixe webkit-flex;　
　　　　　　　　　　　-Préfixe webkit-flex-flow: row wrap;
　　　　　　　　　　　-Préfixe webkit-align-content: space-around;
　　　　　　　　　　　/*　Syntaxe standard　*/
　　　　　　　　　　　display: flex;
　　　　　　　　　　　flex-flow: row wrap;
　　　　　　　　　　　align-content: space-around;
　　　　}

Testez pour voir‹/›

Valeur de l'attribut

Le tableau suivant décrit les valeurs de cette propriété.

Valeur	Description
center	Les éléments sont situés au centre du conteneur élastique.
flex-start	Les éléments sont situés au début du conteneur flex.
flex-end	Les éléments sont situés à l'extrémité du conteneur flex.
space-between	Les éléments sont répartis uniformément dans le conteneur élastique, de sorte que l'espace entre deux éléments adjacents soit le même.
space-around	Les éléments sont répartis uniformément dans le conteneur flex, de sorte que l'espace autour de chaque élément (c'est-à-dire avant, entre et après) soit le même.
stretch	Étendez l'élément pour qu'il s'adapte au conteneur élastique. L'espace disponible est réparti uniformément entre tous les éléments. C'est la valeur par défaut.
initial	Réinitialisez cette propriété à sa valeur par défaut.
inherit	Si spécifié, l'élément associé utilise la valeur calculée de l'attribut align de l'élément parent.-content。

Compatibilité du navigateur

align-L'attribut content est pris en charge par tous les navigateurs populaires. Le numéro indique la version du premier navigateur prenant en charge cette propriété.

	Firefox 28+ Google Chrome21+ Internet Explorer 11+ Apple Safari 7+ ^{-Préfixe webkit-} Opera 12.1+

Attention : Apple Safari 7et versions supérieures pour prendre en charge align-l'attribut content, mais nécessite-Préfixe webkit-par exemple-Préfixe webkit-align-content: center;

En savoir plus

Veuillez consulter les tutoriels suivants :Alignement CSS。

Attributs associés :align-items，align-self，display，flex，flex-basis，flex-direction，flex-flow，flex-grow，flex-shrink，flex-wrap，justify-content，min-height，min-width，order。

CSS3 align-Attribut items