- descripción de las propiedades flex-box
Flex-box es la nueva técnica de maquetación CSS 3, con la cual es mucho más fácil crear estructuras HTML sin tener que usar float, inline-block o los muchos trucos que usábamos antes. 2015 es el momento indicado para aprender usar flex-box ya que ha alcanzado un buen soporte en navegadores. Puedes consultarlo en caniuse.com.
La primera idea que tuvimos en codingonweb fue hacer un buen tutorial sobre como usar flex-box, pero en el proceso de conseguir información me encontré de que ya existen muy buenos tutoriales para aprender desde cero. Con este artículo solo quiero aclarar ciertas cosas que considero no son explicadas claramente, asi pueden usar este articulo como complemento para los tutoriales.
El primero paso es leer los excelentes tutoriales de flex-box que he encontrado:
Ahora si no quedastes claro y necesitas una refuerzo lee el resto del articulo, aunque si le entendiste a la primera no sera necesario.
Flexbox ofrece una manera eficiente de maquetar cubriendo espacios disponibles ya sea expandiendo o encogiendo a sus elementos hijos. Para usar flex-box solo tienes que usar en un contenedor la propiedad display: flex. Esto convierte al elemento en un contenedor flex-box y automáticamente todos los elementos hijos directos se consideran elementos flexbox.
Aquí tienes un ejemplo sencillo para ver mejor en acción flex-box. Le he puesto una altura al contenedor para una mejor comprensión.
Ahora lo interesante aquí es que con este ejemplo no podemos ver en acción lo de : “cubriendo espacios disponibles ya sea expandiendo o encogiendo a sus elementos hijos”. Para esto solo tienes que agregar ancho a los elementos hijos, no importa si es en píxeles ó porcentajes. Lo interesante es que si el ancho de los hijos excede el ancho de su contenedor, flex-box fuerza a sus hijos a encogerse, logrando el comportamiento de caja flexible. Ejemplo (redimensiona la zona de resultado)
Como puedes ver flexbox nos crea unas cajas flexibles que se adaptan automáticamente.
La propiedad “justify-content” sirve para determinar cómo queremos alinear los elementos flexbox(hijos) dentro de su contenedor en el eje horizontal. Ojo que para poder ver en acción esta propiedad la suma de los anchos de los hijos no tiene que exceder el 100% de su padre, tienes que dejar un espacio para poder ver como flex-box alinea los elementos, Ejemplo
Ahora por defecto flex-box toma todos los hijos y los encoge ó expande para que siempre estén dentro de su contenedor no importa si la suma de sus anchos exceden el 100% del ancho de su padre ó hay elementos adicionales, ejemplo:
Como puedes ver en el ejemplo anterior los hijos tienen 25% de ancho y son 7, por lo que 25*7 = 175%, sobrepasa totalmente el 100% del padre pero flex-box los mantiene dentro de su contenedor. Este comportamiento es por defecto, pero podemos cambiarlo con la propiedad “flex-wrap”. Ejemplo:
En el ejemplo anterior podemos ver que cambiando el valor de esta propiedad podemos hacer que los elementos que no caben en el contenedor sean desplazados hacia abajo. Hay que poner mucha atención en que cada elemento ocupa 25% entonces solo 4 de ellos alcanzan en su contenedor padre para lograr el 100% los demás sobrantes serán desplazados, La propiedad “align-items” es usada para alinear los elementos flex-box (hijos) en el eje vertical. Ejemplo:
En el ejemplo he alineado los elemento hacia abajo en el eje vertical. También podemos hacerlo en el centro:
Las propiedades anteriores son solo algunas de las mas comunes y que se usan solamente en el contenedor flexbox. Pero los hijos también tienen propiedades que podemos usar para manipularlos individualmente como son:
Order: Se usa para alterar el orden de los elementos, independientemente del orden en el HTML. Por defecto todos los elementos flex-box tiene 0. Si queremos pasar un elemento de primero sobre todos los demas usamos -1. Ejemplo:
La parte interesante aquí es que el orden va de menor a mayor, como -1 es menor que cero , este elemento ira de primero. Ahora nos toca hablar de 2 propiedades que son muy poco utilizadas pero que tienden a la confusión, estas propiedades son usadas solo en elementos flex-box(hijos):
flex-grow: Determina cuanto un elemento va crecer con respecto a los otros hijos dentro del mismo contenedor, si hay espacio disponible para hacerlo. Ejemplo:
Ojo esto es muy importante : “si hay espacio disponible para hacerlo”, lo que quiero decir, es que si entre todos los hijos logran el 100% de ancho del padre no habrá espacio para ser usado por la propiedad flex-grow. Ejemplo:
Como puedes ver en el ejemplo anterior los hijos ahora tienen 15% , lo cual hacen 75% entre todos. El resto del espacio disponible lo toma el elemento con flex-grow.
flex-shrink: Es el inverso del flex-grow, determina cuanto un elemento se va encoger con respecto a los otros hijos dentro del mismo contenedor. Para ver esto en acción los demás hijos tienen que aumentar su tamaño para forzar que se encoja. Para comprender mejor este comportamiento haz lo siguiente con el siguiente ejemplo:
En el ejemplo anterior el tercer div tiene la clase “shrink”, ahora aumenta el tamaño de los elementos con la clase “container_item” de 25% a 40% y haz click en play. Solo se encoge cuando la suma del ancho de todos los hijos supera el 100% de contenedor.
flex-basis: define un tamaño base para un elemento, lo demas elementos se van a comportar en base a este. Es muy util para hacer algo como esto Ejemplo:
Flex-box viene a solucionar muchos problemas de maquetacion que teniamos y aprender a usarlo te quitara muchos dolores de cabeza. Par terminar te recomiendo los siguientes link para completar tu aprendizaje:
- http://philipwalton.github.io/solved-by-flexbox/
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- https://www.smashingmagazine.com/2016/11/css-grids-flexbox-and-box-alignment-our-new-system-for-web-layout/
No hay comentarios:
Publicar un comentario