À partir de Chrome 123, 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 à créer une mise en page flexible ou de grille. Toutefois, vous devrez peut-être mettre à jour votre CSS si vous avez utilisé align-content en dehors de ces méthodes de mise en page, car cela prendra désormais effet.
Navigateurs pris en charge
- 123
- 123
- 125
- 17,4
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 flexible, la propriété align-content est utilisée sur le conteneur flexible pour aligner les éléments flexibles 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.
align-content espace les lignes d'éléments Flex, car le conteneur Flex dispose d'un espace libre sur l'axe transversal.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 flexible, et d'autres comportements d'élément flexibles 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.
align-content centre l'orientation verticalement dans un conteneur flexible.Avec align-content disponible pour la mise en page de blocs, vous pourrez obtenir un alignement vertical sans avoir à créer une mise en page flexible pour que la propriété fonctionne. Aucune propriété supplémentaire n'est nécessaire, car l'élément reste un élément de bloc. La seule modification concerne l'alignement.
align-content centre l'orientation verticalement dans un conteneur de blocs (nécessite Chrome 123 ou Safari 17.4 ou version ultérieure).Tester la prise en charge de align-content dans les mises en page de blocs
Malheureusement, il n'est pas possible de tester la compatibilité de align-content dans la mise en page en blocs. Comme align-content est pris en charge depuis longtemps dans la mise en page flexible et en grille, l'utilisation de requêtes de fonctionnalité avec @supports renvoie toujours la valeur "true". C'est la même situation que celle qui s'est produite avec la propriété gap dans Flexbox. Le groupe de travail CSS étudie une solution pour les implémentations partielles comme celle-ci.
Vérifiez que vos sites ne présentent pas d'alignement inattendu
La propriété align-content est définie depuis de nombreuses années dans la spécification pour travailler sur des mises en page de blocs. Comme aucun navigateur n'était compatible avec align-content en dehors de ces contextes, il n'a rien fait. Toutefois, si vous avez ajouté la propriété à un élément qui n'est pas un conteneur flexible ou de grille, elle commencera à être appliquée à partir de Chrome 123. Recherchez l'utilisation de align-content dans votre CSS, et utilisez la version bêta pour tester vos sites et vos applications, si cela peut être le cas pour vous.