Ejemplo
Coloque los elementos de la flexibilidad <div> elemento con el espacio entre las líneas:
// Code for Safari 7.0+
document.getElementById("main").style.WebkitAlignContent = "space-between";
// Standard syntax
document.getElementById("main").style.alignContent
= "space-between"; Inténtalo tú mismo " Definición y Uso
La propiedad alignContent alinea los elementos del contenedor flexible cuando los artículos no utilizan todo el espacio disponible en el eje transversal (vertically) .
Consejo: Utilice la propiedad justifyContent para alinear los elementos en el eje principal (horizontally) .
Nota: Debe haber varias líneas de artículos para esta propiedad para tener algún efecto.
Soporte del navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos por Webkit especifican la primera versión que trabajó con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| alignContent | 21.0 | 11.0 | 28.0 | 7.0 Webkit | 12.1 |
Nota: Safari soporta una alternativa, la propiedad WebkitAlignContent.
Sintaxis
Devolver la propiedad alignContent:
object .style.alignContentEstablecer la propiedad alignContent:
object .style.alignContent="stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit"
Valores de propiedad
| Valor | Descripción |
|---|---|
| stretch | Valor por defecto. Los productos que se estiran para adaptarse al recipiente |
| center | Los artículos se colocan en el centro del recipiente |
| flex-start | Los productos que están colocados al principio del recipiente |
| flex-end | Los artículos se colocan en el extremo del recipiente |
| space-between | Los artículos se colocan con el espacio entre las líneas |
| space-around | Los artículos se colocan con el espacio antes, entre y después de las líneas |
| initial | Establece esta propiedad a su valor por defecto. Lea acerca inicial |
| inherit | Hereda esta propiedad de su elemento padre. Lea acerca de heredar |
Detalles técnicos
| Valor por defecto: | tramo |
|---|---|
| Valor de retorno: | Una cadena, que representa la propiedad align-contenido de un elemento |
| Versión CSS | CSS3 |
Páginas relacionadas
Referencia CSS: align-content property
HTML DOM estilo de referencia: alignItems property
HTML DOM estilo de referencia: alignSelf property
HTML DOM estilo de referencia: justifyContent property
<Estilo de objeto