Prise en charge de "align-content" dans les mises en page de blocs et de tableaux

Rachel Andrew

À partir de Chrome 123, vous pouvez utiliser la propriété align-content de l'alignement des boîtes CSS sur les mises en page de blocs et de tableaux. Cela permettra d'aligner la direction du bloc sans avoir à créer une mise en page flexible ou en 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 il prendra désormais effet.

Browser Support

• 123
• 123
• 125
• 17.4

align-content dans les mises en page flexibles et en 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, sa valeur est space-between. L'espace disponible dans le conteneur flex est donc réparti entre les lignes flex.

La propriété 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 par défaut des éléments flexibles prennent également effet. Dans l'exemple suivant, le titre est centré verticalement avec align-content: center, ce qui entraîne la réduction de l'élément pour l'adapter au contenu. Vous devez donc appliquer flex-grow: 1 à l'élément.

La propriété align-content centre le titre verticalement dans un conteneur Flex.

Avec align-content disponible pour la mise en page en bloc, 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. Seule l'alignement est modifié.

La propriété align-content centre le titre verticalement dans un conteneur de bloc (nécessite Chrome 123 ou Safari 17.4 ou version ultérieure).

Tester la compatibilité de align-content dans les mises en page par blocs

Malheureusement, il n'est pas possible de tester la compatibilité de align-content dans la mise en page par blocs. Comme align-content est compatible depuis longtemps avec les mises en page flexibles et en grille, l'utilisation de requêtes de caractéristiques avec @supports renverra toujours la valeur "true". Il s'agit de 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érifier l'alignement inattendu de vos sites

La propriété align-content est définie depuis de nombreuses années dans la spécification comme fonctionnant sur les mises en page en bloc. Comme aucun navigateur n'est 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 flex ou grille, elle commencera à avoir un effet à partir de Chrome 123. Recherchez align-content dans votre CSS et utilisez la version bêta pour tester vos sites et applications si cela peut être votre cas.