Ejemplo
líneas de envase hacia el centro del recipiente de la flexión:
div
{
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: center;
}
Inténtalo tú mismo " Definición y Uso
La propiedad align-contenido modifica el comportamiento de la propiedad flex-wrap. Es similar a alinear-artículos, pero en lugar de la alineación de los elementos de flexión, se alinea líneas flexibles.
Consejo: Utilice el justificar contenido propiedad 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.
| Valor por defecto: | stretch |
|---|---|
| Heredado: | no |
| animatable: | no. Read about animatable |
| Versión: | CSS3 |
| la sintaxis de JavaScript: | object .style.alignContent="center" Try it |
Soporte para el 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 funcionaba con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| align-content | 21.0 | 11.0 | 28.0 | 9.0 7.0 -webkit- | 12.1 |
sintaxis CSS
align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;Valores de propiedad
| Valor | Descripción | Juegalo |
|---|---|---|
| stretch | Valor por defecto. Las líneas se extienden a ocupar el espacio restante | Juegalo " |
| center | Las líneas se embalan hacia el centro del recipiente flex | Juegalo " |
| flex-start | Las líneas se embalan hacia el comienzo del recipiente flex | Juegalo " |
| flex-end | Las líneas se embalan hacia el final del recipiente flex | Juegalo " |
| space-between | Las líneas se distribuyen uniformemente en el recipiente flex | Juegalo " |
| space-around | Las líneas se distribuyen uniformemente en el recipiente flex, con espacios de tamaño medio en los extremos | Juegalo " |
| initial | Establece esta propiedad a su valor por defecto. Lea acerca inicial | Juegalo " |
| inherit | Hereda esta propiedad de su elemento padre. Lee sobre heredar |
Páginas relacionadas
CSS Referencia: align-items property
CSS Referencia: align-self property
CSS Referencia: justify-content property
Referencia HTML DOM: alignContent property