align-content |
Aligné le contenu |
|---|---|
| CSS3 |
Syntaxe
| align-content: center|flex-start|flex-end|inherit|initial|space-around|space-between|stretch; |
Paramètres
| Paramètre | Description |
|---|---|
| center | Ce paramètre permet d'indiquer que la ligne être au centre du conteneur. |
| flex-start | Ce paramètre permet d'indiquer que la ligne doit être en haut du conteneur. |
| flex-end | Ce paramètre permet d'indiquer que la ligne doit être en bas du conteneur. |
| inherit | Ce paramètre permet d'indiquer qu'il faut hériter des propriétés du parent de cette propriété. |
| initial | Ce paramètre permet d'indiquer qu'il faut utiliser la valeur par défaut de cette propriété. |
| space-around | Ce paramètre permet d'indiquer que les lignes sont réparties uniformément dans le conteneur avec un espace de moitié au extrémité supérieur et inférieur du conteneur. |
| space-between | Ce paramètre permet d'indiquer que les lignes sont réparties uniformément dans le conteneur. |
| stretch | Ce paramètre permet d'indiquer que la ligne doit s'étirer vers le haut afin de prendre l'espace restant. C'est la valeur par défaut. |
Description
Cette propriété permet d'aligner les items de contenu flexible quand les items n'utilisent pas toute l'espace disponible sur l'axe verticale.
Remarques
- Alignement des lignes dans un conteneur flex ou grid : La propriété align-content permet de gérer l'espacement entre les lignes d'un conteneur lorsque ce dernier comporte plusieurs lignes, notamment dans un layout de type flexbox ou grid. Elle influence la façon dont ces lignes sont distribuées verticalement (ou horizontalement dans un conteneur en écriture verticale).
- Fonctionne uniquement avec plusieurs lignes : La propriété align-content ne s'applique que lorsque le conteneur a suffisamment d'éléments pour générer plusieurs lignes (par exemple, avec flex-wrap: wrap). Si le conteneur n'a qu'une seule ligne, cette propriété n'a aucun effet, et il faut plutôt utiliser align-items.
- Différence avec align-items : Contrairement à align-items, alignant les éléments d'une seule ligne, align-content agit sur l'ensemble des lignes d'un conteneur. Cela signifie qu'elle détermine l'espacement global entre les lignes plutôt que l'alignement des éléments individuels dans chaque ligne.
- Valeur stretch par défaut : Par défaut, align-content a la valeur stretch, ce qui signifie que les lignes s'étirent pour remplir l'espace disponible dans le conteneur. Cela peut entraîner un espacement vertical ou horizontal uniforme entre les lignes, selon l'orientation du conteneur.
- Options pour contrôler l'espacement : align-content propose plusieurs valeurs, comme flex-start, flex-end, center, space-between, space-around, et space-evenly. Chacune de ces options offre un contrôle précis sur la manière dont les lignes sont distribuées, en les regroupant ou en répartissant l'espace entre elles de différentes façons.
- Effet dans un layout Grid : En mode CSS Grid, align-content contrôle la disposition des lignes dans la grille, influençant la façon dont les pistes de la grille sont espacées dans l'axe de la grille (généralement vertical). Cela est particulièrement utile pour ajuster les grilles lorsqu'elles ne remplissent pas entièrement la hauteur (ou largeur) du conteneur.
- Impact de la taille du conteneur : L'effet de align-content dépend directement de la taille du conteneur par rapport à son contenu. Par exemple, si le conteneur est trop petit pour accueillir les lignes, les valeurs comme space-around ou space-between n'auront pas l'effet attendu. Dans ces cas, les lignes peuvent simplement être compressées.
- Prise en charge par les navigateurs Web : La propriété align-content est largement prise en charge par les navigateurs Web modernes pour les conteneurs flex et grid. Cependant, dans les anciens navigateurs ou contextes particuliers, des ajustements peuvent être nécessaires pour obtenir un comportement similaire (par exemple, en utilisant des marges ou des hacks CSS).
Exemples
L'exemple suivant permet d'effectuer un alignement des lignes au début du conteneur :
- .container {
- display: flex;
- flex-wrap: wrap;
- align-content: flex-start;
- }
L'exemple suivant permet d'effecteur un alignement des lignes au centre du conteneur :
- .container {
- display: flex;
- flex-wrap: wrap;
- align-content: center;
- }
L'exemple suivant permet d'alignement des lignes à la fin du conteneur :
- .container {
- display: flex;
- flex-wrap: wrap;
- align-content: flex-end;
- }
L'exemple suivant permet d'effectuer la répartition égale de l'espace entre les lignes :
- .container {
- display: flex;
- flex-wrap: wrap;
- align-content: space-between;
- }
L'exemple suivant permet d'effectuer la répartition égale de l'espace autour des lignes :
- .container {
- display: flex;
- flex-wrap: wrap;
- align-content: space-around;
- }
Dernière mise à jour : Dimanche, le 20 décembre 2015