Flexbox: orden de colocación

Dentro de cada contenedor flexbox existen los bloques hijos con sus propiedades que permiten describir como disponerlos dentro de sus filas o columnas en los que los coloca el contenedor flex. 

Cuando actua el modelo flexbox los items hijos son colocadas a lo largo de una fila o de una columna en el orden en que están escritos en el código de la página, o en orden inverso si se usan las direcciones row-reverse o column-reverse.

Este orden es personalizble y podemos cambiarlo para que aparezcan en cualquier orden diferente del orden de escritura del código html, como vas a ver en los ejemplos que siguen más abajo.

Al definir el bloque contenedor flexbox se indicaba la manera en que deben disponerse los elementos hijos, filas (row) o columnas (column). Con estas únicas instrucciones el modelo coloca los hijos según estén escritos bien sea según el eje horizontal o el vertical. Pero esto puede trastocarse.

El primer cambio a este comprotamiento está en la propia definición del bloque. Flex-direction puede tomar el valor row o row-reverse, en este segundo caso los bloques se colocan en orden inverso a com aparecen escritos en el código de la página. Igual se aplica al modo columnas, pues usarse column o column-reverse para repartir los items hijos a lo largo de un eje vertical.

<style>
.padre{
display:flex;
flex-direction: row-reverse;
}
.padre div{
background-color: aqua;
margin: 2px;
}
</style>

<div>Hijo 1</div>
<div>Hijo 2</div>
<div>Hijo 3</div>

Prueba este ejemplo y verás como los items hijos aparecen en orden inverso al que aparecen en el código de la página. Realmente lo que ha ocurrido es que el flexbox se ha invertido, lo que ra inicio ahora es el final y viceversa. Si flex-direction es row reverse el inicio de las lineas está a la derecha y los bloques hijos se empiezan a colocar desde la derecha. Es como reflejar la página, el texto sigue escribiéndose en su sentido normal pero los ejes tiene el sentido cambiado.

Sin necesidad de usar row-reverse o column-reverse es posbile controlar el orden en que se colocan los bloques hijos dentro de su contendor, se usa la propiedad order en cada hijo. Puedes verlo con este ejemplo, que puedes editar en el sandbox

<style>
.caja-flex {
display:flex;
border: 1px solid blue;
width: 400px;
height: 400px; }
.caja-flex > div{
width: 75px;
height:50px;
background-color: aqua;
margin: 2px;
}
</style>

<div class="caja-flex" >
<div style="order:4">Hijo 1</div>
<div style="order:1">Hijo 2</div>
<div style="order:2">Hijo 3</div>
<div style="order:3">Hijo 4</div>

</div>

Como ves el orden en el que están escritos los bloques hijos van del "hijo 1" al "hijo 4", pero el resultado se ve que "Hjo 1" está al final de la fila. ¿por qué? por que su número de orden especificado en la propiedad order del bloque es 4.

Este valor es relativo, igual puedes poner 21, 22, 23, 20. Más que el número lo que importa es el orden. Por eso también puedes usar números negativos: serían posiciones contadas desde el primer hijo para atrás. Si el primier hijo tiene order=1, el hijo con order=-1 se pondrá antes que el primero.

Una aplicación simple de esta propiedad en un diseño responsive en el que al disminuir el ancho de la ventana se cambia la dirección y el orden de los boques hijos

<style>
.padre{
display:flex;
border: 1px solid blue;
width: 400px;
height: 200px;
}
.padre > div{
width:180px;
height:50px;
margin: 2px;
}
.padre div:nth-child(1){
background-color: aqua;
}
.padre div:nth-child(2){
background-color:antiquewhite;
}
@media (max-width:600px){
.padre{ flex-direction:column; }
.padre div:nth-child(1) { order:2; }
.padre div:nth-child(2) { order:1; }
}
</style>

<div class="padre" >
<div>
Bloque hijo número 1
</div>
<div>
Bloque hijo número 2
</div>
</div>

Edita y estudia este ejemplo en el sandbox. Estrecha la ventana de resultados y verás como los bloques se trasladan de eje y también cambia de ordern: ahora el bloque "Bloque hijo número 2" aparece en el primer lugar. El cambio de eje principal lo pongo para que se vea mejor el cambio de orden, por supuesto no es necesario.

Este efecto lo logramos mediante una regla dependiento del medio (@media) que es aplicada con ventanas de ancho inferior a 600px. Para anchos menores el flex es tipo columna y el bloque escrito en segundo lugar aparecerá en primer lugar. Para anchos superiores tenemos un flex tipo fila y los hijos están en el orden en que están escritos en el código de la página.