La propiedad justify-content
Podemos controlar el alineamiento de los elementos de una caja flexible ( flexbox ) a lo largo de su eje principal con justify-content
.
La propiedad justify-content
es una propiedad del contenedor flex y puede tomar una de estas valores:
.contenedor { justify-content: flex-start | flex-end | center | space-between | space-around; }
flex-start
( el valor por defecto ): los elementos aparecen agrupados al principio ( start ) del eje principal.
flex-end
: los elementos aparecen agrupados al final ( end ) del eje principal.
center
: los elementos aparecen agrupados al centro ( center ).
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.
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
)
justify-content: flex-start
Si queremos que los elementos ( items ) aparezcan agrupados al principio ( start ) del eje principal de la caja flex utilizamos justify-content: flex-start;
.flex-container.flex-start{ -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; }
.flex-container{
width: 250px;
height:100px;
padding:5px;
margin: 10px auto;
background-color:#124678;
display:-webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flex-item{
display: inherit;
width:50px;
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-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
1
2
3
1
2
3
justify-content: flex-end
Si queremos que los elementos ( items ) aparezcan agrupados al final ( end ) del eje principal de la caja flex utilizamos justify-content: flex-end;
.flex-container.flex-end{ -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; }
.flex-container{
width: 250px;
height:100px;
padding:5px;
margin: 10px auto;
background-color:#124678;
display:-webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flex-item{
display: inherit;
width:50px;
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-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
1
2
3
1
2
3
justify-content: center
Si queremos que los elementos ( items ) aparezcan agrupados en el centro ( center ) de la caja flex utilizamos justify-content: center;
.flex-container.center{ -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }
.flex-container{
width: 250px;
height:100px;
padding:5px;
margin: 10px auto;
background-color:#124678;
display:-webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flex-item{
display: inherit;
width:50px;
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-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
1
2
3
1
2
3
justify-content: space-between
Si utilizamos justify-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-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }
.flex-container{
width: 250px;
height:100px;
padding:5px;
margin: 10px auto;
background-color:#124678;
display:-webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flex-item{
display: inherit;
width:50px;
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-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
1
2
3
1
2
3
justify-content: space-around
Si utilizamos justify-content: space-around;
los elementos ( items ) aparecen distribuidos uniformemente, y con un espacio igual entre ellos.
.flex-container.space-around{ -webkit-justify-content: space-around; -ms-flex-pack: justify; justify-content: space-around; }
.flex-container{
width: 250px;
height:100px;
padding:5px;
margin: 10px auto;
background-color:#124678;
display:-webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flex-item{
display: inherit;
width:50px;
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-justify-content: space-around;
-ms-flex-pack: justify;
justify-content: space-around;
}
1
2
3
1
2
3
Entender flexbox de manera interactiva.