FlexBox para diseños responsive
Categorías : CSS, HTML, Programación, Responsive.

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.
Maquetación HTML
Echad un vistazo al HTML :
<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
CSS para la vista normal
Ahora veamos el CSS normal :
/* 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
Luego en la
Para las etiquetas 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
/* 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
La otra parte destacable de este código, es la 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.