Flexbox: realizar un layout responsive CSS simple y limpio

Flexbox: realizar un layout responsive CSS simple y limpio


desarrollo web aprender a programar curso de programación tecnologías Formación profesional Trabajo Coding Bootcamp desarrollador full-stack Librerías javascript front-end

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./Users/nicoladivenere/Desktop/Schermata 2021-06-08 alle 11.49.35.png

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

../Schermata%202021-06-08%20alle%2012.23.52.png

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

../Schermata%202021-06-08%20alle%2012.48.04.png

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).../Schermata%202021-06-08%20alle%2012.55.12.png

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.

../Schermata%202021-06-08%20alle%2015.00.48.png../Schermata%202021-06-08%20alle%2015.02.04.png

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

 

../Schermata%202021-06-08%20alle%2015.40.06.png../Schermata%202021-06-08%20alle%2015.38.27.png

justify-content: space-between

../Schermata%202021-06-08%20alle%2015.48.32.png../Schermata%202021-06-08%20alle%2015.50.39.png

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

../Schermata%202021-06-08%20alle%2016.01.39.png../Schermata%202021-06-08%20alle%2016.02.02.png

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.

../Schermata%202021-06-08%20alle%2016.19.26.png../Schermata%202021-06-08%20alle%2016.20.06.png

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/

Curso de programación Aulab Hackademy

Conviértete en Desarrollador weben 3 meses

Descubre el bootcamp de programación Hackademy

Programa Completo

© 2020 Aulab. Todos los derechos reservados • P.IVA: IT07647440721 • Política de privacidad