La propiedad align-content

facebook-svg gplus-svg twitter-svg

Podemos controlar el alineamiento de los elementos de una caja flexible ( flexbox ) a lo largo de su eje principal con justify-content o a lo largo de su eje transversal con align-items.
Pero, a veces, los elementos de la caja flex pueden ocupar varias líneas ( vea flex-wrap ). En este caso podemos controlar el alineamiento de los elementos flex utilizando la propiedad align-content.

La propiedad align-content es una propiedad del contenedor flex y puede tomar una de estas valores:

.contenedor { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }

flex-start: los elementos aparecen agrupados al principio ( start ) del eje transversal.

flex-end: los elementos aparecen agrupados al final ( end ) del eje transversal.

center: los elementos aparecen agrupados al centro ( center ).

stretch ( el valor por defecto ): los elementos aparecen estirados ( stretched ) para ocupar el espacio restante.

space-between: los elementos aparecen distribuidos uniformemente: al principio, en el centro y al final del contenedor flex.

space-around: los elementos aparecen distribuidos uniformemente, y con un espacio igual entre ellos.

flex align-content

Para los usuarios de IE10

Para que los usuarios de IE10 tengan una experiencia similar utilizamos la propiedad –ms-flex-line-pack cuyos posibles valores son:

start ( en lugar de flex-start )
end ( en lugar de flex-end )
center
stretch
justify ( en lugar de space-between y  space-around )

align-content: flex-start

Si queremos que los elementos ( items ) aparezcan agrupados al principio ( start ) del eje transversal de la caja flex utilizamos align-content: flex-start;

.flex-container.flex-start{
	-webkit-align-content: flex-start;
	-ms-flex-line-pack: start;
	align-content: flex-start;
}

.flex-container{
	width: 250px;
	height:200px;
	padding:5px;
	margin: 10px auto;
	background-color:#124678;
	display:-webkit-flex; 
	display: -ms-flexbox; 
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.flex-item{
	display: inherit;
	width:50px;
	min-height:50px;
	background-color:#ccc;
	margin:5px;
}
.flex-item p{
	width:100%; 
	text-align:center; 
	-webkit-align-self: center;
	-ms-flex-item-align: center;
	align-self: center;  
	margin:0; 
	}

.flex-container.flex-start{
	-webkit-align-content: flex-start;
	-ms-flex-line-pack: start;
	align-content: flex-start;
}

1

2

3

4

5

6

7

1

2

3

4

5

6

7

align-content: flex-start

Si queremos que los elementos ( items ) aparezcan agrupados al final ( end ) del eje transversal de la caja flex utilizamos align-content: flex-end;

.flex-container.flex-end{
	-webkit-align-content: flex-end;
	-ms-flex-line-pack: end;
	align-content: flex-end;
}

.flex-container{
	width: 250px;
	height:200px;
	padding:5px;
	margin: 10px auto;
	background-color:#124678;
	display:-webkit-flex; 
	display: -ms-flexbox; 
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.flex-item{
	display: inherit;
	width:50px;
	min-height:50px;
	background-color:#ccc;
	margin:5px;
}
.flex-item p{
	width:100%; 
	text-align:center; 
	-webkit-align-self: center;
	-ms-flex-item-align: center;
	align-self: center;  
	margin:0; 
	}

.flex-container.flex-end{
	-webkit-align-content: flex-end;
	-ms-flex-line-pack: end;
	align-content: flex-end;
}

1

2

3

4

5

6

7

1

2

3

4

5

6

7

align-content: center

Si queremos que los elementos ( items ) aparezcan agrupados en el centro ( center ) de la caja flex utilizamos align-content: center;

.flex-container.center{
	-webkit-align-content: center;
	-ms-flex-line-pack: center;
	align-content: center;
}

.flex-container{
	width: 250px;
	height:200px;
	padding:5px;
	margin: 10px auto;
	background-color:#124678;
	display:-webkit-flex; 
	display: -ms-flexbox; 
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.flex-item{
	display: inherit;
	width:50px;
	min-height:50px;
	background-color:#ccc;
	margin:5px;
}
.flex-item p{
	width:100%; 
	text-align:center; 
	-webkit-align-self: center;
	-ms-flex-item-align: center;
	align-self: center;  
	margin:0; 
	}

.flex-container.center{
	-webkit-align-content: center;
	-ms-flex-line-pack: center;
	align-content: center;
}

1

2

3

4

5

6

7

1

2

3

4

5

6

7

align-content: stretch

Si queremos que los elementos ( items ) de la caja flex aparezcan estirados ( stretched ) ocupando el espacio restante, utilizamos align-content: stretch;

.flex-container.stretch{
	-webkit-align-content: stretch;
	-ms-flex-line-pack: stretch;
	align-content: stretch;
}

.flex-container{
	width: 250px;
	height:200px;
	padding:5px;
	margin: 10px auto;
	background-color:#124678;
	display:-webkit-flex; 
	display: -ms-flexbox; 
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.flex-item{
	display: inherit;
	width:50px;
	min-height:50px;
	background-color:#ccc;
	margin:5px;
}
.flex-item p{
	width:100%; 
	text-align:center; 
	-webkit-align-self: center;
	-ms-flex-item-align: center;
	align-self: center;  
	margin:0; 
	}

.flex-container.stretch{
	-webkit-align-content: stretch;
	-ms-flex-line-pack: stretch;
	align-content: stretch;
}

1

2

3

4

5

6

7

1

2

3

4

5

6

7

align-content: space-between

Si utilizamos align-content: space-between; los elementos ( items ) aparecen distribuidos uniformemente: al principio, en el centro y al final del contenedor flex.

.flex-container.space-between{
	-webkit-align-content: space-between;
	-ms-flex-line-pack: justify;
	align-content: space-between;
}

.flex-container{
	width: 250px;
	height:200px;
	padding:5px;
	margin: 10px auto;
	background-color:#124678;
	display:-webkit-flex; 
	display: -ms-flexbox; 
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.flex-item{
	display: inherit;
	width:50px;
	min-height:50px;
	background-color:#ccc;
	margin:5px;
}
.flex-item p{
	width:100%; 
	text-align:center; 
	-webkit-align-self: center;
	-ms-flex-item-align: center;
	align-self: center;  
	margin:0; 
	}

.flex-container.space-between{
	-webkit-align-content: space-between;
	-ms-flex-line-pack: justify;
	align-content: space-between;
}

1

2

3

4

5

6

7

1

2

3

4

5

6

7

align-content: space-around

Si utilizamos align-content: space-around; los elementos ( items ) aparecen distribuidos uniformemente, y con un espacio igual entre ellos.

.flex-container.space-around{
	-webkit-align-content: space-around;
	-ms-flex-line-pack: justify;
	align-content: space-around;
}

.flex-container{
	width: 250px;
	height:200px;
	padding:5px;
	margin: 10px auto;
	background-color:#124678;
	display:-webkit-flex; 
	display: -ms-flexbox; 
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.flex-item{
	display: inherit;
	width:50px;
	min-height:50px;
	background-color:#ccc;
	margin:5px;
}
.flex-item p{
	width:100%; 
	text-align:center; 
	-webkit-align-self: center;
	-ms-flex-item-align: center;
	align-self: center;  
	margin:0; 
	}

.flex-container.space-around{
	-webkit-align-content: space-around;
	-ms-flex-line-pack: justify;
	align-content: space-around;
}

1

2

3

4

5

6

7

1

2

3

4

5

6

7

Entender flexbox de manera interactiva.