A continuación explico el paso a paso de un ejercicio en el que:
Vamos a elaborar el diseño de los contenedores para MOBILE aplicando display Flexbox
Vamos a aplicar responsive design para adaptar el diseño a 2 tamaños de pantalla adicionales
Nota: Vamos a utilizar la estrategia “Mobile First/Only”, por esa razón nuestro modelo base es para Mobile.
¿Estás listo? ✍
ELABORAR EL DISEÑO DE LOS CONTENEDORES PARA MOBILE 📱 (aplicando display Flexbox)
PASO 1
📌Elaboramos la estructura HTML, que estará compuesta de elementos contenedores y de contenido, a los cuales, en algunos casos, se les ha asignado una clase que servirá como selector para aplicar los estilos CSS.
📌En la parte inferior de la imagen podemos visualizar como va quedando nuestra web.
_
PASO 2
📌Creamos los estilos CSS: iniciamos añadiendo un color de fondo a cada elemento contenedor.
_
PASO 3
📌Generamos el display FLEX.
📌⚠ Es clave recordar que esta propiedad se aplica al elemento padre (contenedor), es decir al elemento DIV que tiene por clase a “wrapper”.
_
PASO 4
📌Añadimos la propiedad: flex-flow, la cual es una propiedad que permite agregar 2 propiedades a la vez: flex-direction y flex-wrap (esta última permite que los elementos hijos pasen a la siguiente fila cuando, por ejemplo, el tamaño de pantalla se reduzca y evita que se apriete el contenido en una sola fila.
_
PASO 5
_
PASO 6
📌Añadimos la propiedad flex-grow, para que cada elemento hijo ocupe el espacio vacío de su fila (si es que se encuentra solo) o lo comparta equitativamente si comparte la fila con uno o más elementos hijos. (para que la repartición sea equitativa es la razón por la cual le asignamos el valor de 1 a todos)
📌En la parte inferior podemos observar el ANTES y DESPUÉS para apreciar el trabajo de la propiedad.
_
PASO 7
📌Añadimos la propiedad flex-basis igualmente a todos los elementos hijos, de esta manera estamos indicando que su width ocupe el 100% de la pantalla.
📌🎯 Objetivo: Que el Aside 1, Aside 2 y Footer se separen y cada uno tenga su propio espacio a lo ancho de la pantalla.
📌En la parte inferior podemos observar el ANTES y DESPUÉS para apreciar el trabajo de la propiedad
_
✅✅✅ De esta forma hemos culminado el diseño MOBILE 🙌🙌
_
.
.
.
ADAPTAR EL DISEÑO PARA UNA PANTALLA MÁS GRANDE 📟 (Responsive Design)
PASO 1
🧶Aplicamos el media querie para una pantalla con width mínimo de 600 px.
🧶🎯Objetivo: Que el Aside 1 y 2 se posicionen en una sola fila, compartiendo espacio equitativo.
🧶Para esto añadimos la propiedad flex-basis 0% (lo que indica que ya no abarcaran el 100% del width y ambos elementos regresaran a ocupar 1 sola fila) en combinación con un flex-grow 1, para que estos 2 elementos repartan equitativamente la fila.
🧶En la parte inferior de la imagen podemos observar los resultados para ambas pantallas.
_
.
.
ADAPTAR EL DISEÑO A UNA TERCERA PANTALLA 💻 (Responsive Design)
PASO 1
🧠Aplicamos el media querie para una pantalla con width mínimo de 800 px.
🧠🎯Objetivo: que el contenido principal (MAIN) y los 2 Aside se posicionen en una sola fila y que este se encuentre en el medio de ambos y ocupando mayor espacio.
🧠Para esto añadimos la propiedad flex-basis 0%, de esta manera el MAIN ya no abarcará el 100% del width y automáticamente ocupará la misma fila del Aside 1 y 2
_
.
PASO 2
🧠Notaremos que nos falta reordenar los elementos en el medio, así que utilizaremos la propiedad order en cada elemento para lograr esto.
_
.
PASO 3
🧠Finalmente utilizamos la propiedad flex-grow en el MAIN para que este ocupe mayor espacio ( 3 veces más) que el Aside 1 y Aside 2. De esta manera hemos culminado, ¿Que te pareció?.
_
.
.
COMPARAR LOS RESULTADOS
Finalmente comparemos las 3 pantallas en una sola lámina:
Espero hayas podido realizar el ejercicio, cualquier consulta estaré atento a responderla. 📢
Fuente del ejercicio: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
