0 FPS

FlexBox para diseños responsive

13 de Diciembre del 2015 por Josep Antoni Bover, 0 visitas, 0 comentarios, 0 votos
Categorías : CSS, HTML, Programación, Responsive.

La web está en segundo plano, animación en pausa.

Cargando animación...

El CSS sigue avanzando y el modelo FlexBox ya ha llegado a la fase de candidato final, por lo que ya funciona en todos los navegadores, prácticamente al 100%.

Hoy voy a explicar un poco como podemos crear un documento responsive, aprovechando las ventajas del modelo FlexBox. Si combinamos el FlexBox con la regla @media podemos conseguir documentos totalmente responsive con unas pocas declaraciones CSS, y un marcaje HTML muy claro.

El modelo FlexBox nos permite tener un contenedor al cual podemos establecer si queremos mostrar sus hijos por columnas o por filas. La idea es crear una cabecera, un marco principal (que será la FlexBox), y un footer. Dentro del marco principal crearíamos un menú de navegación, un artículo, y un menú lateral alternativo.

El objetivo es que si la resolución es menor que 500 pixeles la página se muestre únicamente a base de filas, ya que los menús laterales no cabrían.

300px 500px 800px

Maquetación HTML

Echad un vistazo al HTML :

Marcaje HTML para el ejemplo

<body>
    <header>Cabecera</header>
    <div id='Principal'>            <!-- Div que usaremos como FlexBox -->
        <article>Articulo</article> 
        <nav>Nav</nav>
        <aside>Aside</aside>
    </div>
    <footer>Pie de página</footer>
</body>

Como veis la parte del HTML no tiene mucha dificultad, solo un apunte article es el primer hijo de #Principal, y sin embargo aparece en medio con la resolución mayor que 500 pixeles de ancho.

CSS para la vista normal

Ahora veamos el CSS normal :

CSS Flex-Box

/* Marco Principal que hace de Flex-Box a modo columnas */
#Principal {
    display:flex;           /* Establecemos el contenedor como FlexBox */
    flex-flow:row;          /* Flujo del contendio de izquierda a derecha */
}
/* Articulo en medio con un 60% del tamaño si estamos a mas de 500 pixeles de ancho */
#Principal > article {
    flex:70%;               /* Establecemos el tamaño al 70% */
    order:2;                /* Cambiamos el orden de forma que el article quede en medio */
    background-color:rgba(230, 230, 230, 0.9);
}
/* Nav a la izquierda con un 15% del tamaño si estamos a mas de 500 pixeles de ancho */
#Principal > nav {
    flex:15%;               /* Establecemos el tamaño al 15% */
    order:1;                /* Cambiamos el orden de forma que el nav quede a la izquierda */
}
/* ASide a la derecha con un 15% del tamaño si estamos a mas de 500 pixeles de ancho */
#Principal > aside {
    flex:15%;               /* Establecemos el tamaño al 15% */
    order:3;                /* Cambiamos el orden de forma que el nav quede a la derecha */
}

En primer lugar podéis ver que establezco la propiedad display a flex, para indicarle al navegador que debe usar el modelo FlexBox en él.

Luego en la línea 4 utilizo la propiedad flex-flow para establecer que el contenedor flex, mostrará sus hijos de izquierda a derecha.

Para las etiquetas nav, article, y aside, establezco en primer lugar el ancho que ocupan con la propiedad flex, y luego establezco el orden de dichas etiquetas con la propiedad order. De esta forma el nav quedara ubicado a la izquierda, el article en medio y el aside a la derecha.

Con esto ya tenemos la estructuración normal creada (resolución para mas de 500 pixeles de ancho), ahora veamos cómo se debe establecer la distribución para resoluciones menores de 500 pixeles de ancho.

CSS para la vista con el ancho reducido

CSS MediaQuery + Flex-Box

/* Regla para resoluciones menores de 500 pixeles de ancho */
@media all and (max-width: 500px) {
    /* Marco Principal que hace de Flex-Box a modo filas */
    #Principal {
        flex-flow:column;   /* Flujo del contendio de arriba a abajo */
    }    
    /* Modifico el tamaño minimo para el articulo */
    #Principal > article { min-height:150px; }    
    /* Volvemos al orden inicial : Articulo, Nav, Aside */
    #Principal > article, #Principal > nav, #Principal > aside {
        order:0;            /* Reseteamos el orden a 0 */
    }
    /* Altura del header, footer, nav y aside a 25 pixeles */
    header, footer, #Principal > nav, #Principal > aside {
        min-height:25px;
    }
}

En la segunda línea vemos la regla @media, que es la encargada de establecer los estilos del documento cuando este es menor que 500 pixeles de ancho.

La otra parte destacable de este código, es la línea 11 donde establezco la propiedad order a 0. Esto hace que las etiquetas nav, article, y aside vuelvan a su posición original, es decir primero el article, luego el nav, y por último el aside, tal y como está maquetado el HTML inicialmente.

Y esto es todo por hoy, si quereis podéis trastear con el ejemplo aquí mismo o desde el laboratorio de pruebas.

Usuario
Password