Blog ENI : Toute la veille numérique !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Flexbox et Grid
  3. Des exemples de mise en page flexible
Extrait - Flexbox et Grid Créer des sites modernes et responsives
Extraits du livre
Flexbox et Grid Créer des sites modernes et responsives
2 avis
Revenir à la page d'achat du livre

Des exemples de mise en page flexible

Une mise en page plein écran et responsive

1. Les affichages obtenus

Le fichier d’exemple à télécharger se nomme : 01-Exemples Flexbox/C06-A.html.

Voici l’exemple que nous allons mettre en place. Nous avons une mise en page en plein écran, avec quatre zones distinctes : un en-tête, une colonne latérale à gauche contenant du texte, une zone centrale pour un article, une colonne latérale à droite contenant une navigation et un pied de page.

Voici son affichage sur un grand écran :

images/C06-006.png

Cette mise en page est responsive, voici son affichage sur un écran plus petit :

images/C06-002.png

Pour l’affichage sur petit écran, vous remarquez que la colonne de navigation initialement placée à droite s’affiche maintenant sous l’en-tête.

2. La structure flexible de la mise en page

Voici le schéma de la structure de cette mise en page :

images/C06-003.png

Toute la mise en page est incluse dans l’élément <body>. L’en-tête est logiquement inséré dans l’élément <header> et de même pour le pied de page qui est placé dans l’élément <footer>. La zone centrale est insérée dans l’élément <main> qui inclut la colonne latérale de gauche dans l’élément <aside>, la zone de l’article dans l’élément <article> et la colonne latérale de droite pour la navigation, dans l’élément <nav>. Bien sûr, libre à vous d’adapter cette structure à vos besoins personnels.

Avec le schéma précédent, vous voyez qu’il y a deux éléments de structure, deux conteneurs qui doivent être flexibles.

L’élément <body> est en affichage flexible, avec une direction principale verticale, pour que ses éléments enfants soient placés les uns sous les autres. Nous avons trois éléments enfants : <header><main> et <footer>.

Le deuxième conteneur est l’élément <main>. Il contient trois éléments enfants : <aside>, <article> et <nav>. Ces trois éléments enfants sont alignés sur l’axe horizontal...

Une autre mise en page plein écran

Le fichier d’exemple à télécharger se nomme : 01-Exemples Flexbox/C06-B.html.

1. La structure de la mise en page

Nous allons concevoir une autre mise en page plein écran qui va reprendre la structure précédente en y apportant une variante. Voici l’affichage final obtenu :

images/C06-004.png

Nous avons quatre zones d’affichage. La colonne latérale de droite contient une navigation et elle occupe toute la hauteur disponible dans la fenêtre du navigateur. La partie suivante à droite contient quatre éléments structurels : un en-tête et un pied de page occupant toute la largeur disponible de cette zone d’affichage. Puis nous avons un article et une petite colonne latérale de gauche.

Voici le schéma de cette structure :

images/C06-005.png

Toute la mise en page est directement placée dans l’élément <body>. Cet élément <body> joue donc un rôle essentiel dans cette structure flexible.

Nous avons ensuite deux éléments placés en ligne : l’élément HTML <nav> et la boîte <div id=’contenu’>. Ces deux éléments occupent toute la place disponible verticalement.

La boîte <div id=’contenu’> est flexible et elle contient trois autres éléments : un en-tête (<header>), une zone centrale (<main>), avec un article (<article>) et une colonne latérale de gauche (<aside>), et un pied de page(<footer>).

Voici le code HTML de cette structure :

<body>  
    <nav>  
        <h3>Tellus Dolor Nullam</h3>  
        <ul>  
            <li><a href="#">Nullam</a></li>  
            <li><a href="#">Curabitur</a></li>  
            <li><a href="#">Aenean</a></li>  
            <li><a href="#">Donec</a></li>...

Créer une mise en page avec des cartes

Le fichier d’exemple à télécharger se nomme : 01-Exemples Flexbox/C06-C.html.

1. Les affichages de la page

Nous allons créer une page proposant un affichage avec des cartes (cards layout en anglais). Ce type de présentation est très classique dans les sites d’e-commerce, dans les portfolios et tous les sites qui ont besoin d’afficher des informations succinctes en pavés ou en mosaïque. Les solutions précédentes à l’avènement du module Flexbox étaient lourdes à mettre en place et généraient beaucoup de problèmes. Avec Flexbox, cette mise en forme est très rapide, particulièrement efficace et responsive.

Voici la page que nous allons construire, affichée sur un grand écran :

images/C06-023.png

Nous avons une mise en page avec une carte pour chaque présentation. La hauteur de chaque carte est strictement identique et l’ensemble des cartes s’affichent dans une grille de trois colonnes.

Voici l’affichage obtenu avec une largeur moyenne d’écran, comme celle que nous pourrions avoir sur une tablette, avec deux colonnes :

images/C06-024.png

Pour terminer, voici une partie de l’affichage obtenu sur un petit écran, de type smartphone, avec une seule colonne :

images/C06-025.png

2. La structure de la page

Voici le schéma de la structure HTML de la page qui est placée dans l’élément <body> :

images/C06-026.png

L’élément <header> affiche l’en-tête de la page et contient un élément <h1> pour afficher le titre.

images/C06-027.png

Ensuite, toute la structure en grille est placée dans l’élément <main class="centre cartes">. Dans cet élément, chaque carte est un élément <article class="carte">.

images/C06-028.png

L’élément <a> permet d’avoir un lien sur tout l’article. Chaque lien <a> contient un élément <figure> pour afficher la photo avec l’élément <img> et la légende de la photo avec l’élément <figcaption>.

La photo :

images/C06-029.png

Et sa légende :

images/C06-030.png

Ensuite, nous avons la boîte <div class="contenu"> permettant l’affichage du contenu, avec un titre <h2> et un paragraphe...