La propiedad order
Por defecto los elementos flex, como todos los elementos HTML aparecen en el mismo orden que en el código. En cajas flex podemos alterar este orden utilizando la propiedad order
.
La propiedad order
es una propiedad de los ítems del contenedor flex y su valor es generalmente un número entero, positivo o negativo.
.item { order: número | initial | inherit; }
El valor por defecto de order
es 0. Todos los elementos flex con el mismo valor, aparecen en el mismo orden que en el código. En el siguiente ejemplo el tercer elemento .flex-item
tiene el orden order:-1
, lo que hace que se desplace delante de los demás elementos .flex-item
que tienen el orden order: 0
( el valor por defecto ).
Por de otra parte el primer elemento .flex-item
tiene el orden order: 1
, y por lo tanto aparece detrás de los demás elementos.
.flex-item:nth-of-type(3){ order:-1; background-color:yellow;} .flex-item:nth-of-type(1){ order: 1; background-color:tomato;}
.flex-container{
width: 250px;
height:150px;
padding:5px;
margin: 10px auto;
background-color:#124678;
display:-webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flex-item{
display: inherit;
width:50px;
background-color:#ccc;
margin:5px;
}
.flex-container .flex-item *{
width:100%;
text-align:center;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
margin:10px;}
.flex-item:nth-of-type(3){ order:-1; background-color:yellow;}
.flex-item:nth-of-type(1){ order:1; background-color:tomato;}
1
2
3
4
1
2
3
4
Advertencia: el orden depende en última instancia de la dirección de los elementos dentro del contenedor flex ( establecida con flex-direction, flex-wrap o flex-flow ).
La única diferencia entre el siguiente ejemplo y el ejemplo anterior es le dirección de los elementos determinada por la propiedad flex-direction
.
.flex-container.row-reverse { flex-direction : row-reverse;}
.flex-container{
width: 250px;
height:150px;
padding:5px;
margin: 10px auto;
background-color:#124678;
display:-webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flex-item{
display: inherit;
width:50px;
background-color:#ccc;
margin:5px;
}
.flex-container .flex-item *{
width:100%;
text-align:center;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
margin:10px;}
.flex-item:nth-of-type(3){ order:-1; background-color:yellow;}
.flex-item:nth-of-type(1){ order:1; background-color:tomato;}
.flex-container.row-reverse{
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
1
2
3
4
1
2
3
4
Entender flexbox de manera interactiva.