Flexbox: realizar un layout responsive CSS simple y limpio

Flexbox es una propiedad de CSS hoy en día muy difusa, utilizada para posicionar los elementos de nuestra página web de manera práctica y veloz al interno de un container (contenedor) padre.

Esta propiedad ha sustituido del todo a grid, utilizada en los últimos años para crear griglie.

La peculiaridad de flexbox, además de la simplicidad para utilizarlo es su compatibilidad con el browser más moderno, como por ejemplo: Google Chrome, Mozilla Firefox,Edge, etc.

Para controlar la compatibilidad de las propiedades CSS puedes utilizar un tool en la dirección: https://caniuse.com/ 

Este instrumento te mostrará, para cada propiedad buscada por ti, una tabla con todas las versiones de los browser por la cual la propiedad es compatible.

Ahora te mostraré cómo utilizar flexbox, a través de ejemplos prácticos.

En el ejemplo de arriba veremos los elementos dispuestos uno abajo del otro.

Para disponer los elementos sobre la misma línea (uno al lado del otro) al interior del container, te bastará para aplicar a este último la propiedad display con valor flex (display: flex).

Otra propiedad importante es la dirección flexible, que puede tener dos valores: fila o columna. Row es el valor predeterminado, en cambio, columna nos permite organizar los elementos verticalmente en una columna.

Los elementos dispuestos en la misma línea (el contenedor debe tener reglas CSS: display: flex; flex-direction: row) se pueden colocar de forma diferente.

Para cambiar la posición de los elementos en el eje horizontal (x) usamos la propiedad: justify-content.

Este último puede tener el siguiente valor: centro, espacio entre, espacio alrededor, etc.

Usamos el valor:

• centro: alinear los elementos dentro del contenedor en el centro;
• space-between: para asignar espacio entre elementos y
• space-around: para asignar el mismo espacio antes y después de cada elemento.
• justificar-contenido: centro

justify-content: space-between

justify-content: space-around (con tres elementos para comprender mejor cómo funciona el espacio alrededor)

A diferencia de justify-content que organiza los elementos a lo largo del eje x, align-items en su lugar organiza los elementos a lo largo del eje y. En este caso específico usamos el centro como valor.

En caso de que los elementos estén organizados en la misma columna, el contenedor debe tener las siguientes reglas CSS: display: flex; flex-direction: columna. Para cambiar la posición de los elementos en el eje horizontal (x) usamos la propiedad: align-items; en lugar de cambiar la posición de los elementos en el eje vertical (y) usamos la propiedad: justify-content. NB: exactamente lo contrario de lo que se hacía anteriormente.

Flexbox tiene muchas otras características y propiedades que puede explorar con más detalle en el sitio web: https://css-tricks.com/snippets/css/a-guide-to-flexbox/