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 bloc et de tableau. Cela permet d'aligner l'orientation des blocs sans avoir à créer de mise en page flex 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 il prendra désormais effet.

Browser Support

• 123
• 123
• 125
• 17.4

align-content dans les mises en page flex et grille

Vous avez probablement utilisé align-content pour aligner des éléments Flex ou des canaux 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, il a une valeur de space-between. Il distribue donc l'espace disponible dans le conteneur flex entre les lignes flex.

La propriété align-content espace les lignes d'éléments Flex, car le conteneur Flex dispose d'espace disponible 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 Flex, et d'autres comportements par défaut des éléments Flex entrent également en vigueur. Dans l'exemple suivant, l'en-tête est centré verticalement avec align-content: center. L'élément se réduit pour s'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 blocs, vous pouvez obtenir un alignement vertical sans avoir à créer une mise en page flex pour que la propriété fonctionne. Aucune propriété supplémentaire n'est requise, car l'élément reste un élément de bloc. Le seul changement concerne l'alignement.

La propriété align-content centre l'en-tête verticalement dans un conteneur de bloc (nécessite Chrome 123 ou Safari 17.4 ou version ultérieure).

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

Malheureusement, il n'est pas possible de tester la prise en charge de align-content dans la mise en page en blocs. Étant donné que align-content est compatible depuis longtemps avec la mise en page flex et grid, l'utilisation de requêtes de fonctionnalités avec @supports renvoie toujours "true". Il s'agit de la même situation que celle rencontrée avec la propriété gap dans Flexbox. Le groupe de travail CSS explore une solution pour les implémentations partielles comme celle-ci.

Vérifier si vos sites présentent un alignement inattendu

La propriété align-content est définie depuis de nombreuses années dans la spécification comme travaillant sur les mises en page de blocs. Comme aucun navigateur n'était compatible avec align-content en dehors de ces contextes, rien ne s'est produit. Toutefois, si vous avez ajouté la propriété à un élément qui n'est pas un conteneur flex ou grid, elle commencera à avoir un effet à partir de Chrome 123. Recherchez dans votre CSS l'utilisation de align-content et utilisez la version bêta pour tester vos sites et applications si c'est le cas.