Maquetación flex

En el CSS

En el siguiente ejemplo los nombres de las clases CSS sugieren la funcionalidad flex.
Por ejemplo: la clase .flex-container transforma una caja cualquiera en un contenedor flex ( display: flex; ). Los contenedores flex verticales llevan la clase .column ya que flex-direction: column. Por de otra parte los contenedores flex horizontales ( .row ) tienen asignada también la clase .justify-space-between donde:

.justify-space-between{ justify-content:space-between; }

Hemos dividido el código CSS en 3 partes

general: incluye colores, tipo y tamaño de fuente, tipo de caja, márgenes, rellenos etc. . .
.flexbox: para los navegadores que soportan flexbox.
Incluye los estilos que transforman las cajas de nuestra página, en contenedores o ítems flex. Todos estos estilos empiezan con .flexbox, la clase que modernizr da al <html> en navegadores que soportan flexbox.
.no-flexbox: para navegadores antiguos que NO soportan flexbox.
Incluye los estilos que transforman las cajas de nuestra página, en cajas flotantes. Todos estos estilos empiezan con .no-flexbox, la clase que modernizr da al <html> en navegadores que NO soportan flexbox.

vea el CSS de este ejemplo

Planificar la maqueta web

En el <body> de la página creamos un #contenedor para la maqueta. Le damos una clase de .flex-container y otra de .column ya que queremos transformarlo en un contenedor flex vertical.
Dentro del contenedor flex colocamos tres elementos, tres ítems flex: un #encabezado <header>, una <section>, y un #pie <footer>.

<div id="contenedor" class="flex-container column">
    <header id="encabezado"></header>
    <section></section> 
    <footer id="pie"></footer>
</div>

A continuación transformamos la <section> en un contenedor flex horizontal. Para esto le damos una clase de .flex-container y otra de .row. Queremos que los elementos dentro de la <section> aparecan distribuidos uniformemente: al principio, en el centro y al final del contenedor flex. Para esto le damos también la clase de .justify-space-between.
Dentro de <section> colocamos otros tres elementos, que se transforman automáticamente en ítems flex: una barra #lateral <aside>, una <section> #central y otra caja <nav> donde colocaremos la navegación o el menú.

<div id="contenedor" class="flex-container column">  
<header id="encabezado"></header>  
<section class="flex-container justify-space-between row">      
    <aside id="lateral"></aside>      
    <section id="central"></section>      
    <nav id="nav"></nav>  
</section>  
<footer id="pie"></footer>
</div>

Podemos anidar contenedores flex

Es interesante ver que los ítems flex pueden ser a la vez contenedores flex. Esto nos permite anidar cajas flex dentro de otras cajas flex sin más complicaciones, ya que ninguna de las propiedades de este módulo es heredada, excepto si así especificado ( inherit).

También transformamos la <section> #central en un contenedor flex horizontal. Para esto le damos una clase de .flex-container y otra de .row. Asimismo le damos la clase .wrap ya que queremos que los ítems flex de la sección #central aparezcan colocados en varias líneas.

Vea la estructura general:

<div id="contenedor" class="flex-container column"> 
<header id="encabezado"></header> 
<section class="flex-container justify-space-between row">   
    <aside id="lateral" class="flex-container column"></aside>  
        <section id="central">        
        <div id="escaparate" class="flex-container justify-space-between wrap row">
        </div>
        </section>
    <nav id="nav">
    <ul class="flex-container column"></ul>
    </nav> 
    </section>
<footer id="pie"></footer>
</div>

Vea un ejemplo de maquetación flex

Sugerencia: podemos trabajar utilizando la clase .no-cssreflections. Firefox no soporta los reflejos CSS, y podemos verificar fácilmente la viabilidad del código en Firefox. Cuando todo esté como queremos podemos cambiar la clase .no-cssreflections por .no-flexbox.

Como verificar los resultados

En el internet podemos encontrar varias páginas web que nos ayudan a verificar nuestra "creación" en varios navegadores. He aquí algunas de ellas:

w3.unpo<code>todo