Unidad 13. Posicionamiento. Flexbox. Grid (XIX)



13.14. Flexbox. Order

order

Por defecto, los elementos flexibles se muestran en el orden enque aparecen en el código, uno a continuación de otro, pero este orden puede alterarse con la propiedad order. Puede tomar valores númericos 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í:

 

Elem. 1
Elem. 2
Elem. 3

Márgenes y padding

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

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


Enero-2019 (V 2.0)
Pág. 13.19
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.