Depuis Chrome 123, Edge 123, Firefox 125, Safari 17.4, vous pouvez utiliser la propriété align-content de CSS Box Alignment pour les mises en page de blocs et de tables. Cela permet un alignement de la direction des blocs sans avoir à vous servir de la méthode Flexbox ou grid. Si Flexbox et Grid ont grandement simplifié le centrage vertical, ils ont également introduit des complexités supplémentaires. Parfois, vous aviez besoin d’une structure de conteneurs supplémentaire pour obtenir le résultat souhaité. Avec la propriété align-content, tout cela devient plus simple.Le statu quo en matière d'alignement CSS consiste à passer à flexbox ou à grid, car align-content ne fonctionne pas dans la mise en page par défaut (flow). En 2024, les navigateurs ont implémenté align-content pour la mise en page flow. Cela présente quelques avantages :
- Vous n'avez pas besoin de flexbox ou de grid, mais seulement d'une propriété CSS pour l'alignement.
- Par conséquent, le contenu n'a pas besoin d'être enveloppé dans une div.
| Code CSS : | Sélectionner tout |
1 2 3 4 | <!-- Marche --> <div style="display: grid; align-content: center;"> Content. </div> |
| Code CSS : | Sélectionner tout |
1 2 3 4 | <!-- ÉCHOUE! --> <div style="display: grid; align-content: center;"> Content with <em>multiple</em> nodes. </div> |
| Code CSS : | Sélectionner tout |
1 2 3 4 5 6 | <!-- Marche avec le content wrapper --> <div style="display: grid; align-content: center;"> <div> <!-- The extra wrapper --> Content with <em>multiple</em> nodes. </div> </div> |
| Code CSS : | Sélectionner tout |
1 2 3 4 | <!-- Marche sans le content wrapper --> <div style="align-content: center;"> Content with <em>multiple</em> nodes. </div> |
Après des décennies de progrès, CSS dispose enfin d'une propriété unique pour contrôler l'alignement vertical !
align-content, syntaxe et valeurs
La propriété CSS align-content définit la façon dont l'espace est réparti entre et autour des éléments le long de l'axe en bloc du conteneur (c'est-à-dire l'axe orthogonal à l'axe d'écriture) lorsque celui-ci est un conteneur de boîte flexible et le long de l'axe principal lorsque le conteneur est une grille.
Cette propriété n'aura aucun effet sur les boîtes flexibles disposées sur une seule ligne (celles avec flex-wrap: nowrap par exemple).
Voici sa syntaxe
| Code CSS : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | /* Alignement le long de l'axe */ /* Note : align-content ne prend pas en charge les valeurs left et right */ align-content: center; /* Les éléments sont groupés au centre */ align-content: start; /* Les éléments sont groupés au début */ align-content: end; /* Les éléments sont groupés à la fin */ align-content: flex-start; /* Les éléments flexibles sont groupés au début */ align-content: flex-end; /* Les éléments flexibles sont groupés à la fin */ /* Alignement normal */ align-content: normal; /* Alignement sur la ligne de base */ align-content: baseline; align-content: first baseline; align-content: last baseline; /* Répartition de l'espace */ align-content: space-between; /* L'espace est réparti entre les éléments, le premier est accolé au bord et le dernier également. */ align-content: space-around; /* L'espace est réparti entre les éléments avec un demi-espace au début et à la fin */ align-content: space-evenly; /* L'espace est réparti entre les éléments et autour */ align-content: stretch; /* Les éléments dimensionnés avec auto sont étirés également afin de remplir le conteneur*/ /* Gestion du dépassement */ align-content: safe center; align-content: unsafe center; /* Valeurs globales */ align-content: inherit; align-content: initial; align-content: unset; |
Valeurs :
- start : Les éléments sont regroupés vers le bord au début de l'axe de bloc.
- end : Les éléments sont regroupés vers le bord à la fin de l'axe de bloc.
- flex-start : Les éléments flexibles sont regroupés vers le bord au début de l'axe de bloc. Cette valeur ne s'applique qu'aux éléments fils d'un conteneur flexible, sinon elle est synonyme de start.
- flex-end : Les éléments flexibles sont regroupés vers le bord au début de l'axe de bloc. Cette valeur ne s'applique qu'aux éléments fils d'un conteneur flexible, sinon elle est synonyme de end.
- center : Les éléments sont regroupés au centre de l'axe de bloc.
- normal : Les éléments sont groupés sur leur position par défaut, comme si align-content n'avait pas été défini.
- baseline first baseline last baseline : Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse. Si first baseline n'est pas prise en charge, la valeur correspondra à start, si last baseline n'est pas prise en charge, la valeur correspondra à end.
- space-between : Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, le premier élément est aligné sur le bord au début du conteneur et le dernier élément est aligné sur le bord à la fin du conteneur.
- space-around : Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, la moitié de cet espace est utilisée entre le premier élément et le bord au début du conteneur et la moitié de cet espace est utilisée entre le dernier élément et le bord à la fin du conteneur
- space-evenly : Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, entre le premier élément et le bord du conteneur et entre le dernier élément et le bord du conteneur.
- stretch : Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en bloc, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par max-height/max-width (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.
- safe : Ce mot-clé est utilisé avec un mot-clé pour l'alignement. Si l'élément dépasse du conteneur avec la valeur d'alignement indiquée, l'élément sera alors aligné avec la valeur start.
- unsafe : Ce mot-clé est utilisé avec un mot-clé pour l'alignement. Quelle que soit la taille et le dépassement éventuellement occasionné, l'élément est aligné avec la valeur indiquée.
align-content dans les mises en page modulables et sous forme de grille
Vous avez probablement utilisé align-content pour aligner des éléments Flex ou des pistes de grille. Dans une mise en page Flex, la propriété align-content est utilisée sur le conteneur Flex pour aligner les éléments Flex sur l'axe transversal. Dans l'exemple suivant, la valeur est space-between. L'espace disponible dans le conteneur Flex est ainsi réparti entre les lignes flexibles.
| Code CSS : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | .flex { border: 5px solid #1a73e8; display: flex; flex-wrap: wrap; gap: 10px; align-content: space-between; padding: 10px; width: 550px; height: 300px; } .flex > div { width: 100px; height: 100px; } .flex > div:nth-child(3n + 1) { background-color: #006bee; } .flex > div:nth-child(3n + 2) { background-color: #fca300; } .flex > div:nth-child(3n + 3) { background-color: #05a749; } |
Résultat
Centrer un élément verticalement
align-content est particulièrement utile pour centrer un élément verticalement dans un conteneur. Pour ce faire, utilisez display: flex avec align-content: center. L'élément devient alors un élément modulable, et d'autres comportements d'élément modulables par défaut sont également appliqués. Dans l'exemple suivant, l'en-tête est centré verticalement avec align-content: center. L'élément est alors rétréci pour s'adapter au contenu. Vous devez donc appliquer flex-grow: 1 à l'élément.
| Code CSS : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .center { border: 5px solid #1a73e8; display: flex; flex-wrap: wrap; align-content: center; padding: 10px; max-width: 550px; height: 300px; } h1 { background-color: #006bee; color: #fff; padding: 10px; flex-grow: 1; } |
Résultat
Avantages et cas d’utilisation
Les avantages de cette nouveauté sont évidents :
- Simplicité : Vous n’avez besoin que d’une seule ligne de CSS pour centrer verticalement un élément. Moins de code signifie moins de risques d’erreurs et une maintenance plus facile.
- Compatibilité : la propriété align-content est prise en charge par la plupart des navigateurs modernes. Vous pouvez l’utiliser sans vous soucier des problèmes de compatibilité.
- Cas d’utilisation : Boutons, icônes, titres, images – partout où le centrage vertical est crucial, cette propriété vous simplifie la vie.
Conclusion
En 2024, CSS a franchi une étape importante en facilitant le centrage vertical. Les développeurs peuvent désormais créer des mises en page plus élégantes et plus propres sans jongler avec des astuces. Alors, profitez de cette nouvelle fonctionnalité et rendez vos designs encore plus professionnels !
Tester dans codepen (1, 2)Sources : historique du centrage vertical, documentation, propriété align-content, groupe de travail de CSS
Et vous ?
Quelle méthode de centrage vertical préférez-vous avant l’ajout de la propriété align-content ? Avez-vous déjà utilisé d'autres méthodes comme le positionnement absolu, les cellules de tableau ou les lignes de contenu en ligne pour centrer verticalement des éléments. Pouvez-vous faire un retour d'expérience ? Pensez-vous que la simplification du centrage vertical en CSS est bénéfique pour les développeurs ? La propriété align-content va-t-elle simplifier votre travail ou préférez-vous toujours vous servir de Flexbox ou Grid ? Quels sont les cas d’utilisation spécifiques où le centrage vertical est crucial pour vous ? Partagez des exemples concrets où le centrage vertical est essentiel dans vos projets. Peut-être des éléments de design, des boutons, des icônes, etc. ? Pensez-vous que CSS devrait continuer à évoluer pour simplifier d’autres aspects de la mise en page ? Avez-vous des idées pour améliorer davantage la gestion de la mise en page ? Élargissez la discussion en abordant d’autres fonctionnalités CSS. 
