Flex es un modo de operacion que se asigna en la propiedad display de un conenedor e indica que ahora los items dentro del contenedor seran "flexibles" en cuanto a su acomodo dentro del contenedor, lo que lo hace bueno para su uso en aplicaciones responsivas.
En este ejemplo voy a realizar algunos experimentos con items dentro de un contenedor flex y veremos que es lo que pasa. Ademas vamos a revizar mas posibilidades de usar flex items con la ayuda de W3Schools.
Primero definimos display:flex en el contenedor padre. Ahora podemos usar las propiedades de un flex item en los items hijos, por ejemplo order, con la cual dependiendo del numero que asignemos a order sera el orden en el que se va a desplegar el item.
Otra propiedad muy util es wrap, con la que definimos si los items seran envueltos por una fila cuyo limite sera el borde del contenedor padre. Al usar wrap, si los items ya han cubierto toda el area horizontal del contenedor, el siguiente item se desplegara en la "fila" de abajo y asi sucesivamente. Tambien podemos usar flex-direction con la que definimos column o row y si pones column, por ejemplo, entonces los items se iran desplegando uno abajo del anterior.
Dentro del estilo de los items tambien podemos hacer uso de la propiedad flex a la que le asignas un numero entero y, dependiendo del valor que le asignes, el item ajusta su tamano con respecto a sus items "hermanos".
Por ultimo te recomiendo revisar el demo de W3Schools que use en el video para mostrar mas opciones con felx y descargar el poster del articulo CSS Flexbox Layout Guide, de Chris Coyier, que describe todas las propiedades de flex de forma grafica.
Boston, Massachusetts
sinoplecarballo@gmail.com
Martin Carballo
@shur_d_firsiel
