Atributo align-content CSS

Definición y uso

align-content modificación de atributo flex-wrap comportamiento del atributo. Es similar a align-items Similares, pero en lugar de alinear los elementos elásticos, alinea las líneas elásticas.

Nota:¡Debe haber múltiples elementos en varias líneas para que esta propiedad funcione!

Consejo:Uso justify-content La propiedad puede alinear horizontalmente los elementos en el eje principal (main-axis).

Vea también:

Tutorial de CSS:Flexbox CSS

Tutorial de CSS:CSS Grid

Manual de referencia de CSS:Atributo alignItems

Manual de referencia de CSS:Atributo alignSelf

Manual de referencia de CSS:Atributo justifyContent

Manual de referencia de HTML DOM:Atributo alignContent

Ejemplo

Empaqueta las líneas de renglón en el centro del contenedor elástico:

div {
  ancho: 70px;
  altura: 300px;
  borde: 1px sólido #c3c3c3;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

Pruebe usted mismo

Sintaxis de CSS

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

Valor del atributo

Valor Descripción
stretch Valor predeterminado. Las líneas de renglón se estiran para ocupar el espacio restante.
center Empaqueta las líneas de renglón hacia el centro del contenedor elástico.
flex-start Empaqueta las líneas de renglón hacia el inicio del contenedor elástico.
flex-end Empaqueta las líneas de renglón hacia el final del contenedor elástico.
space-between Las líneas de renglón se distribuyen uniformemente en el contenedor elástico.
space-around Las líneas de renglón se distribuyen uniformemente en el contenedor elástico, ocupando cada extremo la mitad.
initial Establezca este atributo en su valor predeterminado. Consulte initial.
inherit Hereda este atributo del elemento padre. Consulte inherit.

Detalles técnicos

Valor predeterminado: stretch
Herencia: No
Producción de animación: No se admite. Consulte:Atributos relacionados con la animación.
Versión: CSS3
Sintaxis de JavaScript: object.style.alignContent="center"

Compatibilidad del navegador

Los números en la tabla indican la primera versión de navegador que admite completamente esta propiedad.

Chrome IE / Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0