Unidad 13. Posicionamiento. Flexbox. Grid (XIX)

13.14. Flexbox. Order

En este vídeo explicamos la propiedad order, como crear diseños adaptativos y la forma compacta flex-flow:

order

Por defecto, los elementos flexibles se muestran en el orden en que aparecen en el código, uno a continuación de otro, pero este orden puede alterarse con la propiedad order. Puede tomar valores numéricos enteros, también negativos. El valor por defecto es cero, es decir, sin alterar el orden. Los valores negativos van delante en el orden, por ejemplo, -1, se mostrará delante de 1.

Por ejemplo, en e siguiente código se ve como los elementos aparecen escritos en el orden siguiente: Elem. 1, Elem. 2 y Elem. 3

<div style="display: flex; order: 2;">Elem. 1 </div>
<div  style="display: flex; order: 3;">Elem. 2 </div>
<div  style="display: flex; order: 1;  ">Elem.  3</div>      

Sin embargo con la propiedad order hemos alterado ese orden para que se muestren así:

Márgenes y padding

Los márgenes de los elementos adyacentes no se colapsan, como ocurre en un contenedor no flexible.

Actualmente, se recomienda no utilizar porcentajes en márgenes y paddings en los elementos flexibles ya que los navegadores los pueden interpretar de diferentes formas.

 Cursos Informática Gratuitos