Creando una web básica con Flex en HTML

En esta entrada veremos cómo crear la clásica estructura de una página web empleando los FlexBox; anteriormente vimos como FlexBox; ahora definiremos una estructura de una página web base como la siguiente:

Anteriormente se explicó el uso de las propiedades:

• flex-grow
• flex-shrink
• flex-basis

Para definir el tamaño básico, espacio sobrante y espacio faltante de los flex y su contenedor respectivamente; estas propiedades las emplearemos en este ejemplo para crear la estructura de una web básica; si tienes dudas, puede consultar los enlaces anteriores.

 #main {
    display: -webkit-flex;
    display:  flex;
    -webkit-flex-flow: row;
    flex-flow: row;
}

#main > article {
    flex: 3 1 60%;
    order: 2;
}

#main > nav {
    flex: 1 6 20%;
    order: 1;
}

#main > aside {
    flex: 1 6 20%;
    order: 3;
}

header, footer {
    display: block;
}

Como puedes apreciar, la idea fundamental es definir el contenedor padre de los flexs con display: flex e indicando la dirección flex-flow: row (inclusive podemos indicar el orden).

Además del comportamiento, orden en que deben aparecer en una misma fila y dimensiones de los flex, empezando con el contenedor principal (article) y los respectivos menús laterales aside y nav.

Enlaces de interés

• W3schools.com: CSS flex Property
• Guía flex
• CSS3 Flexbox ejemplo original