La mise en page flexible en CSS3

1. La définition du contexte flexible

C’est avec la propriété display: flex que nous allons définir le contexte de boîte flexible pour un conteneur donné.

Nous créons une boîte <div> flexible, avec trois paragraphes enfants.

Voici les règles CSS :

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

La bordure du conteneur flexible est définie pour bien matérialiser la boîte <div>.

Voici la structure HTML :

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

Voici l’affichage obtenu :

Nous pouvons tester immédiatement l’aspect flexible de cette mise en page en redimensionnant la fenêtre du navigateur.

Affichage sur un écran large :

Affichage sur un écran étroit :

Les paragraphes enfants, donc les items flexibles, s’adaptent automatiquement à la largeur de la fenêtre du navigateur. Nous avons bien une mise en page flexible.

Le fichier d’exemple à télécharger est Chapitre-07/C07-D1.html.

La propriété display: flex agit sur le conteneur comme un affichage block, comme avec les techniques de mise en page "traditionnelles". La propriété display: inline-flex agit sur le conteneur comme un affichage inline.

2. La distribution des items flexibles

Dans l’exemple précédent, les items flexibles sont distribués horizontalement dans le conteneur ; les paragraphes s’affichent les uns à côté des autres. Nous pouvons modifier cet affichage avec la propriété flex-direction.

Cette propriété peut recevoir ces valeurs :

1. Le contexte des items flexibles

Nous l’avons vu précédemment, dès qu’un conteneur utilise la propriété display: flex, il définit un contexte flexible. Cela veut dire que tous les enfants directs de ce conteneur, les items flexibles, seront dans un contexte flexible. Dans ce titre nous allons étudier les propriétés que nous pouvons appliquer aux items flexibles.

2. Modifier l’ordre d’affichage des items

La propriété order nous permet de modifier l’ordre d’affichage des items flexibles, quel que soit leur ordre de déclaration dans le code. Par défaut, la valeur de la propriété order est 0. Nous pouvons donc attribuer une valeur à n’importe quel item flexible. L’item ayant la valeur la plus grande sera affiché en dernier et inversement l’item ayant la valeur la plus petite sera affiché en premier.

Voici un conteneur ayant cinq items flexibles, cinq paragraphes. Le conteneur et les paragraphes possèdent des bordures et des arrière-plans colorés afin de mieux les visualiser.

Voici les règles CSS utilisées :

<style>  
    #boite-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 structure HTML comporte un conteneur, #boite-flexible, avec cinq paragraphes identifiés comme items enfants.

<div id="boite-flexible">  
    <p id="p1"><strong>Premier</strong>. Vivamus sagittis...</p>  
    <p id="p2"><strong>Deuxième</strong>. Integer posuere...</p>  
    <p id="p3"><strong>Troisième</strong>....

1. Une mise en page très simple

Pour ce premier exemple de mise en page avec le module Flexbox, nous allons concevoir une structure très simple.

Nous avons un conteneur, dans une boîte <div>, qui a une largeur maximale flexible de 900 pixels. Il est centré dans la fenêtre du navigateur.

Ensuite, nous souhaitons avoir deux blocs l’un à côté de l’autre. Le deuxième bloc à droite, avec un élément <aside>, a une largeur fixe de 150 pixels. Le premier bloc à gauche, avec un élément <article>, va occuper la place restante.

Voici le schéma de la structure :

Voici la structure HTML :

<div id="conteneur">  
    <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>Les liens</h3>  
        <ul>  
            <li><a href="#">Lien 1</a></li>  
            <li><a href="#">Lien 2</a></li>  
            <li><a href="#">Lien 3</a></li>  
            <li><a href="#">Lien 4</a></li>  
            <li><a href="#">Lien 5</a></li>  
        </ul>  
    </aside>  
</div>
 

Voyons maintenant les CSS utilisés...