Sesión 10 – Flexbox avanzado y diseño responsivo

1

Propiedades de los hijos flexflex-grow, flex-shrink, flex-basis y order

Además de las propiedades del contenedor, los hijos flex tienen propiedades propias:

                CSS
.flex-item {
    flex-grow: 1;    /* Cuánto crece en proporción a los demás (0 = no crece) */
    flex-shrink: 1;  /* Cuánto se encoge si falta espacio (0 = no se encoge) */
    flex-basis: 200px; /* Tamaño base antes de crecer o encogerse */

    /* Abreviatura: grow shrink basis */
    flex: 1 1 200px;

    /* Atajo común: crece para ocupar el espacio disponible */
    flex: 1;

    /* Cambiar el orden visual sin cambiar el HTML */
    order: 2;
}
            

2

Layout de tres columnasColumnas iguales con Flexbox

                CSS
.three-columns {
    display: flex;
    gap: 20px;
}

.three-columns > div {
    flex: 1;                    /* Las tres columnas ocupan el mismo ancho */
    padding: 20px;
    background-color: #f0f0f0;
    border-radius: 8px;
}
            

                HTML
<div class="three-columns">
    <div>
        <h3>Columna 1</h3>
        <p>Contenido de la primera columna.</p>
    </div>
    <div>
        <h3>Columna 2</h3>
        <p>Contenido de la segunda columna.</p>
    </div>
    <div>
        <h3>Columna 3</h3>
        <p>Contenido de la tercera columna.</p>
    </div>
</div>
            

3

Flex-direction: columnDisposición vertical

Por defecto, Flexbox dispone los hijos en fila (row). Con column, los dispone en columna vertical:

                CSS
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 250px;
}
            

4

Diseño responsivoAdaptar la web a todos los tamaños de pantalla

El diseño responsivo hace que la web se adapte a todos los tamaños de pantalla: móvil, tablet y escritorio.

Meta viewport (obligatorio)

                HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
            

Imágenes responsivas

                CSS
img {
    max-width: 100%;
    height: auto;
}
            

Breakpoints comunes

Dispositivo	Ancho
Móvil pequeño	< 480px
Móvil grande	480px – 767px
Tablet	768px – 1023px
Escritorio	1024px – 1199px
Escritorio grande	≥ 1200px

Enfoque mobile-first: Consiste en escribir primero los estilos para móvil y luego añadir media queries con min-width para pantallas más grandes. Es la estrategia recomendada.

5

Media queriesEstilos diferentes según el tamaño de pantalla

Layout responsivo mobile-first

                CSS
/* Estilos base (mobile-first) */
.three-columns {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.three-columns > div {
    width: 100%;
    padding: 15px;
    background-color: #f0f0f0;
    border-radius: 8px;
}

/* Pantallas medianas (tablets): 2 columnas */
@media (min-width: 600px) {
    .three-columns {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .three-columns > div {
        width: 48%;
    }
}

/* Pantallas grandes (escritorio): 3 columnas */
@media (min-width: 900px) {
    .three-columns > div {
        width: 31%;
        flex: 1;
    }
}
            

Menú responsivo sencillo

                CSS
.menu {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

@media (min-width: 600px) {
    .menu {
        flex-direction: row;
        justify-content: center;
        gap: 20px;
    }
}
            

6

Vista previa responsivaObserva cómo un layout se adapta a cada tamaño

Simula diferentes tamaños de pantalla

mi-sitio-web.com

Mi Sitio Web

☰

Columna 1

Contenido de la primera columna con texto de ejemplo.

Columna 2

Contenido de la segunda columna con texto de ejemplo.

Columna 3

Contenido de la tercera columna con texto de ejemplo.

900px – Escritorio: 3 columnas, navegación horizontal

7

Ejercicio prácticoAplica lo aprendido

Añade la etiqueta <meta name="viewport" ...> en el <head> de todas tus páginas.
Crea un layout de tres columnas con Flexbox que:
- En móvil (< 600px): muestre las columnas apiladas verticalmente.
- En tablet (600px – 899px): muestre 2 columnas.
- En escritorio (≥ 900px): muestre 3 columnas.
Haz que tu menú de navegación pase de vertical (móvil) a horizontal (escritorio).
Añade max-width: 100%; height: auto; a todas las imágenes para que sean responsivas.
Prueba tu página redimensionando la ventana del navegador o usando las herramientas de desarrollo (F12 → vista responsiva).
Experimenta con order para cambiar el orden visual de los elementos en diferentes tamaños de pantalla.