2. Un exercice rapide pour apprendre Flexbox et les bases du responsive

L’objectif de cet exercice est de mettre en application l’apprentissage de l’utilisation de Flexbox afin de créer une mise en page en 3 colonnes responsive.

La structure aura un header, un contenu principal et 2 sidebars, comme dans ce schéma :

Lorsqu’on passera la page en version mobile, elle devra passer sur 1 seule colonne de façon à lire le contenu seulement de haut en bas.

1. La structure de base

On commence donc par préparer la structure html de base du template :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apprendre Flexbox</title>
    <link rel="stylesheet" href="flexbox.css">
</head>
<body>
    <header class="header">Ceci est l'en-tête </header>
    <aside class="sidebar">Voici la sidebar gauche</aside>
    <main class="contenu">Contenu principal de la page</main>
    <aside class="sidebar">Voici la sidebar droite</aside>
    <footer class="footer">Voici le pied de page</footer>
</body>
</html>

Et pour donner un peu de couleur à tout ça, voici une première ébauche de la feuille de styles flexbox.css :

body, html {
    line-height: 1.5; /* Définit l'interligne (espace vertical entre les lignes de texte) à 1,5 fois la taille de la police par défaut, ce qui améliore la lisibilité. */
    padding:0;  /* Enlève tout l'espace intérieur (padding) par défaut des éléments `body` et `html`. */
    margin:0; /* Idem pour les marges extérieures */
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* définition des règles communes */

.header, .contenu, .sidebar, .footer {
    padding:25px 35px; /* Ajoute un espace intérieur de 25 pixels en haut et en bas, et de 35 pixels à gauche et à droite pour ces éléments. */
    box-sizing: border-box; /* Change le modèle de boîte pour inclure le padding et la bordure dans les dimensions totales spécifiées des éléments (largeur et hauteur). */
}

/* définition de règles spécifiques */

.header {
    background-color: #6b4b3e;
    color:white;
}

.contenu {
    background-color:#75f4f4;
    color:#313628; /* Utilisation d'une couleur foncée pour contraster avec le fond clair */
}

.sidebar {
    background-color:#084887;
    color:white;
}

.footer {
    background-color:#313628;
    color:white;
}

Voici quelques explications sur l’utilisation de ces styles :

Pourquoi mettre padding et margin à 0 sur le sélecteur <body> et <html> ?
Dans les navigateurs web, les éléments body et html ont des styles par défaut définis par les feuilles de style des navigateurs. Ces styles par défaut incluent souvent des marges et des espacements (padding) qui peuvent donner un rendu que vous ne souhaitez pas. En remettant tout à 0 on s’assure de partir sur une base « saine » sans aucune marge ajoutée par le navigateur de vos visiteurs.
A quoi sert la propriété box-sizing: border-box; ?
Cette propriété modifie le modèle de boîte CSS, ce qui influence comment la largeur et la hauteur des éléments sont calculées en incluant le padding et les bordures. En effet, par défaut lorsque vous définissez des largeurs pour vos blocs html – par exemple avec des % – CSS ne prends pas en compte les éventuelles marges appliquées à chaque boîte. En utilisant la propriété box-sizing : border-box, cela permet de définir que la largeur totale de l’élément html inclut les marges internes et externes. CF https://grafikart.fr/tutoriels/box-sizing-css-1043 si vous voulez une explication en vidéo !

A ce stade vous devriez avoir une page qui ressemble à ça :

2. Mettre en place la structure flexible

Comme vous pouvez le constater, les différents éléments prennent toute la largeur de votre page car ils sont considérés comme des « blocs » (ils ont la propriété par défaut display:bloc )

Comme vous l’avez vu précédemment, pour créer une mise en page « flexible », il faut donner la propriété display:flex au bloc qui contient les éléments que l’on veut réorganiser.

Il suffit donc d’ajouter une nouvelle balise qui contiendra les blocs <aside> et <main>, à laquelle on attribue la classe « container » (par exemple). Modifiez votre html de façon à ce que votre body ressemble à ça :

<body>
    <header class="header">Ceci est l'en-tête </header>
        <div class="container">
            <aside class="sidebar">Voici la sidebar gauche</aside>
            <main class="contenu">Contenu principal de la page</main>
            <aside class="sidebar">Voici la sidebar droite</aside>
        </div>
    <footer class="footer">Voici le pied de page</footer>
</body>

Puis dans votre feuille de styles ajoutez simplement ce sélecteur avec la propriété display:flex. On lui ajoutera également la propriété flex-wrap:wrap pour permettre aux éléments qu’il contiendra de passer à la ligne si la largeur de la fenêtre est trop petite :

.container {
    display:flex;
    flex-wrap:wrap;
}

Il va falloir ensuite définir la largeur des blocs <aside> et <contenu> ; pour ce faire, il faut utiliser la propriété flex-basis qui, comme la propriété width, permet de définir la largeur d’un bloc qui se trouve dans un conteneur flex.

On va faire en sorte que les sidebar fasse 25% de la largeur, et que le contenu occupe le reste soit 50% :

.contenu {
    background-color:#75f4f4;
    color:#313628; /* Utilisation d'une couleur foncée pour contraster avec le fond clair */
    flex-basis:50%;
}

.sidebar {
    background-color:#084887;
    color:white;
    flex-basis:25%
}

Retournez sur votre page côté public : voici ce que ça devrait donner ->

Profitez-en pour remplir vos différents blocs avec du contenu (soit généré avec chatGPT, soit avec du lorem ipsum) :

Enfin, pour remplir un peu la page (car il y a un gros espace blanc sous votre footer), vous pouvez appliquer une hauteur à vos blocs header, container et footer en leur appliquant respectivement les valeurs minimales 10vh, 80vh et 10vh (ce qui permet d’attribuer au minimum 10% de la hauteur de l’écran aux header et footer et 80% au contenu).

.header {
    background-color: #6b4b3e;
    color:white;
    min-height: 10vh;
}
....

.footer {
    background-color:#313628;
    color:white;
    min-height: 10vh;
}

.container {
    display:flex;
    min-height: 80vh;
}

Maintenant l’ensemble de votre page devrait être remplie :

Maintenant il va falloir gérer le responsive en utilisant les media queries, car si vous réduisez votre fenêtre les colonnes risque d’être un peu serrées :

3. Application des règles de responsive design

Pour que l’apparence de la page change en fonction de la résolution d’écran, il va falloir mettre en place des conditions spécifiques que l’on appelle les « media queries » (ou « requêtes en fonction du media »).

En l’occurence, on va devoir faire en sorte que, pour les résolutions inférieures à 750px par exemple, la valeur de flex-basis du contenu et des sidebars passe à 100%

Pour ce faire il suffit d’ajouter ces quelques lignes à la fin de votre feuille de style :

/* Règles responsive */
@media screen and (max-width: 750px) {
    .contenu {
        flex-basis: 100%;
    }

    .sidebar {
        flex-basis: 100%;
    }
}

Le rendu devrait être le suivant lorsque vous réduisez votre fenêtre :

Votre interface est bien responsive !

Quelques éléments supplémentaire pour peaufiner le travail :

Avec Flexbox, vous avez la possibilité de maitriser complètement l’ordre d’affichage de vos blocs grâce à la propriété order:x (remplacez x par un nombre)

Par exemple

Si vous souhaitez mettre les 2 colonnes après le contenu principal en mode mobile, il vous suffit de modifier votre CSS comme ceci :

    .sidebar {
        flex-basis: 50%;
        order:1;
    }

Par défaut, tout bloc a une propriété order égale à 0. L’ordre d’affichage des blocs se fait du nombre le plus petit au nombre le plus grand.

Ainsi, un élément d’une flexbox avec un order à 1 s’affichera après un élément qui a un order à 0 (ou pas d’order du tout, vu que par défaut c’est 0).

Un élément avec un order à 2 s’affichera après ceux qui ont un order à 1, et ainsi de suite.

En donnant la propriété order:1 aux sidebars, on leur demande de s’afficher après les blocs qui sont à 0 ; donc, comme le bloc de contenu n’a pas de propriété order définie, il est à 0 – les sidebars vont donc s’afficher après.

Pour qu’elles soient cote à cote, le dernier attribut à modifier est flex-basis: en le mettant à 50% on s’assure que chaque sidebar prends la moitié de l’écran !

Voilà le résultat :

Ajout de la balise d’en-tête <meta viewport>

Une dernière essentielle chose à faire lorsqu’on travaille sur des interfaces responsive : indiquer aux navigateurs que la résolution de la page correspond à la résolution d’écran de l’appareil avec lequel ils la consultent.

Il suffit simplement d’ajouter ceci à l’intérieur de votre balise <head></head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Pour le travail que vous venez de réaliser, ça ne changera pas grand chose car la page est simple ; néanmoins pour des interfaces plus complexes, cela peut éviter des effets indésirables comme l’apparition du curseur horizontal en bas de l’écran !

Explication des attributs

width=device-width : Cela signifie que la largeur de la fenêtre de visualisation doit être égale à la largeur de l’écran de l’appareil. Cela permet de s’assurer que le contenu s’adapte correctement à la largeur de l’appareil.
initial-scale=1.0 : Cela définit le niveau de zoom initial lorsque la page est chargée pour la première fois par le navigateur. Une échelle initiale de 1.0 signifie qu’aucun zoom n’est appliqué par défaut et que la page s’affiche à 100% de sa taille réelle.

Avec ce travail, vous avez une structure de base utilisable pour la création de pages de contenus simples mais adaptatives.

Nous allons voir dans le prochain tuto comment faire quelque chose d’un peu plus travaillé en mettant en application flexbox + quelques règles d’adaptabilité sur la recette de cuisine que vous avez créée dans le module html précédent.