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 dirección de bloques 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 se aplicará.
Navegadores compatibles
- 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 segmentos de cuadrícula. En un diseño flexible, se usa la propiedad align-content en el contenedor flexible para alinear los elementos flexibles en el eje cruzado. 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.
align-content
espacia las filas de los elementos flexibles debido a que el contenedor flexible tiene
espacio libre en el eje cruzado.Centra un elemento verticalmente
align-content es particularmente útil para centrar un elemento de forma vertical dentro de un contenedor. Para lograrlo, usa display: flex junto con align-content: center. Esto hace que el elemento se convierta en uno flexible y también se aplique otro comportamiento predeterminado de este elemento. En el siguiente ejemplo, el encabezado se centra verticalmente con align-content: center, lo que hace que el elemento se contraiga para adaptarse al contenido y, por lo tanto, deberás aplicar flex-grow: 1 al elemento.
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.
align-content centra el encabezado verticalmente dentro de un contenedor de bloques (se requiere Chrome 123 o Safari 17.4 o versiones posteriores).Prueba la compatibilidad de align-content en diseños de bloque
Lamentablemente, no es posible probar la compatibilidad de align-content en el diseño de bloques. Como align-content se admitió por mucho tiempo en diseños flexibles y de cuadrícula, el uso de consultas de funciones con @supports siempre mostrará el valor verdadero. Es la misma situación que ocurrió con la propiedad gap en flexbox. El Grupo de trabajo de CSS explora una solución para implementaciones parciales como esta.
Verifica que tus sitios no estén alineados de forma inesperada
Durante muchos años, en la especificación se definió la propiedad align-content como el 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 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.