El diseño flexible en CSS3

1. La definición del contexto flexible

Con la propiedad display: flex vamos a definir el contexto de caja flexible para un contenedor determinado.

Creamos una caja <div> flexible, con tres párrafos secundarios.

Estas son las reglas CSS:

<style> 
    #caja-flexible { 
    display: flex; 
    border: solid 1px #000; 
    } 
</style>
 

El borde del contenedor flexible se define para materializar la caja <div>.

Esta es la estructura HTML:

<div id="caja-flexible"> 
    <p>Vivamus sagittis lacus...</p> 
    <p>Integer posuere...</p> 
    <p>Donec sed odio dui...</p> 
</div>
 

Este es el aspecto resultante:

Podemos comprobar inmediatamente el aspecto flexible de este diseño cambiando el tamaño de la ventana del navegador.

Aspecto en una pantalla grande:

Aspecto en una pantalla estrecha:

Los párrafos secundarios, y por tanto los elementos flexibles, se adaptan automáticamente a la anchura de la ventana del navegador. Tenemos un diseño flexible.

Ejemplo disponible en Cap-07/C07-D1.html.

La propiedad display: flex actúa sobre el contenedor como una presentación de tipo block, como con las técnicas de diseño «tradicionales». La propiedad display: inlineflex actúa sobre el contenedor como una presentación de tipo inline.

2. La distribución de los elementos flexibles

En el ejemplo anterior, los elementos flexibles se distribuyen horizontalmente en el contenedor; los párrafos aparecen unos al lado de otros. Podemos cambiar esta presentación con la propiedad flex-direction.

Esta propiedad puede recibir estos valores:

Este es el aspecto resultante con flex-direction: column;:

Ejemplo disponible en Cap-07/C07-D2.html.

3. El cambio de fila

Podemos decidir qué elementos...

1. El contexto de los elementos flexibles

Como hemos visto anteriormente, cuando un contenedor utiliza la propiedad display: flex, define un contexto flexible. Esto significa que todos los elementos secundarios directos de este contenedor, los elementos flexibles, estarán en un contexto flexible. En esta sección, vamos a estudiar las propiedades que podemos aplicar a los elementos flexibles.

2. Cambiar el orden en el que aparecen los elementos

La propiedad order nos permite cambiar el orden en el que aparecen los elementos flexibles, independientemente del orden en el que hayan sido declarados en el código. Por defecto, el valor de la propiedad order es 0. Por tanto, podemos atribuir un valor a cualquier elemento flexible. El elemento que tenga el valor más alto se mostrará el último y al revés, el elemento que tenga el valor más bajo se mostrará en primer lugar.

El siguiente es un contenedor que tiene cinco elementos flexibles, cinco párrafos. El contenedor y los párrafos tienen bordes y fondos de colores para visualizarlos mejor.

Estas son las reglas CSS utilizadas:

<style>   
    #caja-flexible {   
        display: flex;   
        flex-direction: row;   
        justify-content: flex-start;   
        border: solid 1px #000;   
    }   
    p {   
        margin: 0;   
        background-color: #eee;   
        border: solid 1px #000;   
        padding: 10px;   
    }   
</style>
 

La estructura HTML contiene un contenedor, #caja-flexible, con cinco párrafos identificados como elementos secundarios.

<div id="caja-flexible"> 
    <p id="p1"><strong>Primero</strong>. Vivamus sagittis...</p> 
    <p id="p2"><strong>Segundo</strong>. Integer posuere...</p> 
    <p id="p3"><strong>Tercero</strong>....

1. Un diseño de página muy simple

Para este primer ejemplo de diseño de página con el módulo Flexbox, vamos a diseñar una estructura muy simple.

Tenemos un contenedor, en una caja <div>, que tiene un ancho máximo flexible de 900 píxeles. Está centrado en la ventana del navegador.

A continuación, queremos tener dos bloques uno al lado del otro. El segundo bloque a la derecha, con un elemento <aside>, tiene un ancho fijo de 150 píxeles. El primer bloque a la izquierda, con un elemento <article>, ocupará el espacio restante.

Este es el esquema de la estructura:

Esta es la estructura HTML:

<div id="contenedor">   
    <article>   
        <h2>Dolor Ultricies Fringilla</h2>   
        <p>Pellentesque habitant morbi...</p>   
        <h2>Consectetur Porta Tortor</h2>   
        <p>Donec ullamcorper nulla non...</p>   
        <h2>Pharetra Mattis</h2>   
        <p>Lorem ipsum dolor sit amet...</p>   
    </article>   
    <aside>   
        <h3>Los enlaces</h3>   
        <ul>   
            <li><a href="#">Enlace 1</a></li>   
            <li><a href="#">Enlace 2</a></li>   
            <li><a href="#">Enlace 3</a></li>   
            <li><a href="#">Enlace 4</a></li>   
            <li><a href="#">Enlace 5</a></li>   
        </ul>...