Maquetación FLEX con CSS
En el siguiente artículo, vamos a describir, cómo usar flexbox para realizar nuestros diseños con CSS.
En el layout flex, los hijos de un contenedor definido cómo FLEX, sé comportarán de manera flexible. Estos, podrán entre otras cosas, ajustar al ancho del contenedor para ocupar todo el espacio, ajustarse para quedarse centrado, variar su ancho e incluso, ordenarse de manera inversa al definido.
Esto nos permitirá realizar maquetaciones flexibles, y será una gran ayuda para realizar nuestras versiones responsive, ya que todo el contenido se reajustará acorde al espacio que haya.
¿Podemos usar Flex con todos los navegadores?
Sí, podéis visitar este enlace, Can I use, donde veréis que navegadores soportan ahora mismo flexbox. Cómo podréis ver, a fecha de hoy, todos los navegadores con soporte, tienen un verde, por lo tanto se puede usar sin problemas.
¿Cómo empezamos con FLEXBOX?
Propiedades que afectan al contenedor (parent)
Bien, cómo todo, vamos a empezar con ejemplos:
En primer lugar, imaginemos que queremos tener 6 bloques de contenido, uno al lado de otro:
flex-direction
Por defecto, tenemos los elementos todos alineados a la izquierda, y en la parte superior. Vamos a empezar a hacer uso de flex. Imaginemos que ahora, queremos que en lugar de estar en la misma línea, estos elementos formen una sóla columna. Para ello haremos uso de flex-direction, que se aplica al contenedor.
Más opciones para flex-direction:
- flex-direction: row para mostrarlos en una misma fila en orden normal. (opción por defecto)
- flex-direction: column para mostrarlos en una misma columna en orden normal.
- flex-direction: row-reverse para mostrarlos en una misma fila en orden inverso.
- flex-direction: column-reverse para mostrarlos en una misma columna en orden inverso.
flex-wrap
Ahora vamos a intentar ahora, hacer que el contenido siempre se mantenga en la misma línea, tanto si es columna cómo si es fila, es decir, que aunque no quepan los elementos dentro del contendor que las contiene, que estás se ajusten al espacio que hay. Hay que tener en cuenta que es el comportamiento por defecto, aunque en este caso lo vamos a indicar.
¿Y si tiene más espacio el contenedor? Veamoslo:
Vaya, se queda igual. Ni se han movido… ¿no habíamos dicho antes, que el contenido se «ajustaba»?
Hagamos una pequeña presentación de justify-content: space-around (más adelante entraremos con más detalle)
Ahora, si queremos que las cajas tengan un tamaño mínimo, ¿cómo podemos forzar a que cuando no quepan, bajen de línea y el contenido se ajuste?
Más opciones para flex-wrap:
- flex-wrap: wrap para mostrarlos en una misma fila en orden normal.
- flex-wrap: nowrap para mostrarlos en una misma columna en orden normal. (por defecto )
- flex-wrap: wrap-reverse la línea se rompe por arriba
Bien, hasta ahora, ya hemos visto cómo podemos poner el contenido en filas, columnas, darle la vuelta, y luego podemos hacer que siempre esté en una misma línea o en varias.
Ahora vamos a poner ese contenido, en relación al contenedor, donde queramos.
justify-content
Vamos ahora, a centrar nuestro contenido, sin tener en cuenta lo que haya a los lados
¿Y si queremos ponerlo a la izquierda?
usemos justify-content: flex-start
Vale, de acuerdo, flex-start, ¿eso es correcto, por qué no se usa «left»?. Bien, esto es por el siguiente motivo. Cuando el contenido está con columna (visto hace unas líneas), flex-start es sinónimo de «lo más arriba posible» y ya no es igual que left. Lo mismo pasa con row-reverse, y column-reverse. En cada contexto significa una cosa diferente.
justify-content con direction: column
justify-content con direction: row-reverse
justify-content con direction: column-reverse
En cada contexto, flex-start significa algo diferente
justify-content: flex-start | flex-end | center | space-between | space-around;
Más opciones para justify-content:
- justify-content: flex-start para poner el contenido al principio.
- justify-content: flex-end para poner el contenido al final
- justify-content: center para centrar
- justify-content: space-between deja el mayor espacio posible entre los elementos
- justify-content: space-around deja el mayor espacio posible entre elementos además de añadirlo a los lados
align-items
Una vez hemos visto el concepto de justify-content, align-items es lo mismo pero en la otra dirección. Es decir, cuando usamos una dirección row, con los elementos en la misma fila, justify-content, nos ajusta el contenido de forma horizontal. align-items, lo hace de forma vertical.
Sí, con una sola línea, hemos conseguido que el contenido, se centrara verticalmente.
Y con ayuda del justify-content… podemos centrar todo el contenido, tanto horizontal cómo verticalmente
Pero esto no es todo!! Hay varias opciones, que pueden ser más que interesantes, ¿quieres columnas con mismo alto?
Otra propiedad es, baseline, con el que se consigue que estén todos los textos a la misma altura, si usamos de referencia la base de la línea.
Más opciones para align-items:
- align-items: flex-start para poner el contenido al principio.
- align-items: flex-end para poner el contenido al final
- align-items: center para centrar
- align-items: stretch deja el mayor espacio posible entre los elementos
- align-items: baseline deja el mayor espacio posible entre elementos además de añadirlo a los lados
align-content
Esta propiedad nos sirve para definir cómo queremos el contenido cuando hay más de una línea. Es parecido a justify-content, pero con más líneas. Es más, si sólo hay una línea, esta propiedad no afecta.
Más opciones para align-content:
- align-content: flex-start los elementos, se ajustan a la arriba
- align-content: flex-end los elementos se ajustan abajo
- align-content: center para centrar, dejando espacio arriba y abajo
- align-content: space-between distribuye el espacio entre los elementos, sin contar los bordes del contenedor
- align-content: space-around distribuye el espacio entre los elementos
- align-content: stretch aprovecha el espacio entre líneas
Propiedades que afectan a los hijos (children)
order
Order, nos permite ordenar los items de la manera que nosotros queramos. Por defecto, el contenido se muestra, conforme está puesto en el código de la web, pero con flexbox podemos cambiarlo, y por ejemplo destacar un elemento siempre en primer lugar. (admite también número negativos)
se usa de la siguiente manera: order: número
flex-grow
Supongamos que no queremos poner un tamañó de ancho fijo, pero sí que queremos que uno de los elementos ocupe el triple que el resto. Con flex-grow, podemos definir esta relación
Hay que definirles a todos los elementos un valor
se usa así: flex-grow: número
flex-shrink
Ahora, en lugar de hacerlos más grande, queremos hacerlos más pequeños
se usa así: flex-shrink: número
flex-basis
Con esta propiedad, podemos definir un tamaño por defecto, antes de que el espacio se reparta entre los elementos. Se puede usar porcentaje, px o cualquier otra unidad.
Destacar, si el valor que se pone a flex-basis es 0, el espacio que haya interno a cada elemento no se respeta, sin embargo cuando es auto, sí y se distribuye.
align-self
Por último, la propiedad que vamos a ver ahora, es la que nos permite crear niños rebeldes. Es decir, si uno de los elementos, no queremos que se comporte cómo el resto, podemos con esta propiedad, sobreescribir su comportamiento respecto a los demás.
Si por ejemplo, tenemos que poner un elemento abajo del todo del contenedor, podemos indicarle que vaya abajo.
Veamos un ejemplo:
Hasta aquí, hemos visto cómo usar flex para crear un contenedor padre con diferentes elementos. Imaginemos ahora que nos plantean un diseño responsive, con 3 columnas, con texto en cada uno de ellos donde, en movil queremos que se cambie a una sola columna
Veamos, cómo realizar esto con flexbox
Además hemos puesto que a partir de 600px, el contenido salga cómo una columna.
Ahora imaginemos que sólo hay una columna, y queremos que nuestro texto salga completamente centrado.
En resumen, trabajar con flexbox, nos facilita el trabajo, trabajando más rápido y con la certeza de tener un responsive adecuado a todos los dispositivos.
