La propiedad order

facebook-svg gplus-svg twitter-svg

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.