Compatibilidad con el contenido "Align-Content" en diseños de bloques y tablas

Rachel Andrew

A partir de Chrome 123, puedes usar la propiedad align-content de CSS Box Alignment en diseños de bloques y tablas. Esto permitirá la alineación de la dirección del bloque sin necesidad de crear un diseño de cuadrícula o flexible. Sin embargo, es posible que debas actualizar tu CSS si usaste align-content fuera de estos métodos de diseño, ya que ahora tendrá efecto.

Browser Support

• 123
• 123
• 125
• 17.4

align-content en diseños flexibles y de cuadrícula

Es probable que hayas usado align-content para alinear elementos flexibles o pistas de cuadrícula. En un diseño flexible, la propiedad align-content se usa en el contenedor flexible para alinear los elementos flexibles en el eje transversal. En el siguiente ejemplo, tiene un valor de space-between, por lo que distribuye el espacio disponible en el contenedor flexible entre las filas flexibles.

La propiedad align-content separa las filas de los elementos flexibles, ya que el contenedor flexible tiene espacio adicional en el eje transversal.

Cómo centrar un elemento verticalmente

align-content es particularmente útil para centrar un elemento verticalmente dentro de un contenedor. Para lograrlo, usa display: flex junto con align-content: center. Esto hace que el elemento se convierta en un elemento flexible y también se aplique otro comportamiento predeterminado de los elementos flexibles. En el siguiente ejemplo, el encabezado se centra verticalmente con align-content: center, lo que hace que el elemento se contraiga para ajustarse al contenido y, por lo tanto, debes aplicar flex-grow: 1 al elemento.

La propiedad align-content centra el encabezado verticalmente dentro de un contenedor flexible.

Con align-content disponible para el diseño de bloques, podrás lograr la alineación vertical sin necesidad de crear un diseño flexible para que funcione la propiedad. No se necesitan propiedades adicionales, ya que el elemento sigue siendo un elemento de bloque. El único cambio es la alineación.

La propiedad align-content centra el encabezado verticalmente dentro de un contenedor de bloques (necesita Chrome 123 o Safari 17.4 o versiones posteriores).

Prueba la compatibilidad de align-content en diseños de bloques

Lamentablemente, no es posible probar la compatibilidad con align-content en el diseño de bloques. Dado que align-content se admite desde hace mucho tiempo en el diseño flexible y de cuadrícula, usar consultas de funciones con @supports siempre devolverá verdadero. Esta es la misma situación que ocurrió con la propiedad gap en Flexbox. El Grupo de trabajo de CSS está explorando una solución para implementaciones parciales como esta.

Verifica si tus sitios tienen una alineación inesperada

La propiedad align-content se ha definido durante muchos años en la especificación como una propiedad que funciona en diseños de bloques. Como ningún navegador admitía align-content fuera de estos contextos, no hizo nada. Sin embargo, si agregaste la propiedad a algo que no es un contenedor flexible o de cuadrícula, comenzará a tener efecto a partir de Chrome 123. Busca en tu CSS el uso de align-content y usa la versión beta para probar tus sitios y aplicaciones si este es tu caso.