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 la alineación de cuadros de CSS 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 flexible o de cuadrícula. Sin embargo, es posible que debas actualizar tu CSS si usaste align-content fuera de estos métodos de diseño, ya que ahora se aplicará.

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 flex o segmentos de cuadrícula. En un diseño flex, la propiedad align-content se usa en el contenedor de flex para alinear los elementos flex 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 aleja las filas de los elementos flex, ya que el contenedor flex tiene espacio libre en el eje transversal.

Cómo centrar un elemento verticalmente

align-content es especialmente útil para centrar un elemento verticalmente dentro de un contenedor. Para ello, usa display: flex junto con align-content: center. Esto hace que el elemento se convierta en un elemento flex, y también se aplica otro comportamiento predeterminado de este tipo de elemento. En el siguiente ejemplo, el encabezado se centra verticalmente con align-content: center, lo que hace que el elemento se reduzca para adaptarse 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 en la alineación.

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

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

Lamentablemente, no es posible probar la compatibilidad con align-content en el diseño de bloques. Como align-content es compatible desde hace mucho tiempo con el diseño flexible y de cuadrícula, el uso de consultas de componentes con @supports siempre mostrará un valor 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 definió durante muchos años en la especificación como trabajo 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 de cuadrícula o flex, comenzará a tener efecto a partir de Chrome 123. Busca el uso de align-content en tu CSS y usa la versión beta para probar tus sitios y aplicaciones si este es tu caso.