13-1 Découverte de Flexbox

Lors de cette activité, nous allons explorer Flexbox de façon progressive avec des boîtes colorées.

Fichiers de départ

Utilisez les fichiers de départ suivants pour cette activité.

index.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Découverte Flexbox</title>
    <link rel="stylesheet" href="./styles/app.css">
</head>
<body>
    <h1>Découverte Flexbox</h1>
    
    <div class="container">
        <div class="box box-1">1</div>
        <div class="box box-2">2</div>
        <div class="box box-3">3</div>
        <div class="box box-4">4</div>
        <div class="box box-5">5</div>
    </div>
</body>
</html>

styles/app.css (styles de base fournis)

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    padding: 40px;
}

h1 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.container {
    background-color: #e3f2fd;
    border: 3px dashed #1976d2;
    padding: 20px;
    min-height: 400px;
}

.box {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 32px;
    font-weight: bold;
    color: white;
    border-radius: 8px;
}

.box-1 {
    background-color: #e91e63;
}

.box-2 {
    background-color: #9c27b0;
}

.box-3 {
    background-color: #2196f3;
}

.box-4 {
    background-color: #4caf50;
}

.box-5 {
    background-color: #ff9800;
}

Partie 1: Activer Flexbox

Sans Flexbox, les boîtes s'empilent verticalement, car les <div> sont des éléments block par défaut.

Activer display: flex

Ajoutez display: flex au conteneur:

.container {
    background-color: #e3f2fd;
    border: 3px dashed #1976d2;
    padding: 20px;
    min-height: 400px;
    display: flex;
}

Questions de découverte

• Que s'est-il passé avec les boîtes?
• Dans quelle direction sont-elles maintenant?

info

display: flex transforme le conteneur en conteneur flex et ses enfants directs deviennent des éléments flex. Par défaut, ils s'alignent horizontalement (en rangée (row)).

Partie 2: Direction avec flex-direction

Explorons maintenant comment changer la direction des éléments.

Phase 1: Direction en colonne

Ajoutez flex-direction: column:

.container {
    background-color: #e3f2fd;
    border: 3px dashed #1976d2;
    padding: 20px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

• Comment les boîtes sont-elles disposées maintenant?

Phase 2: Direction inversée

Changez pour flex-direction: row-reverse:

.container {
    background-color: #e3f2fd;
    border: 3px dashed #1976d2;
    padding: 20px;
    min-height: 400px;
    display: flex;
    flex-direction: row-reverse;
}

• Quel changement observez-vous?
• L'ordre des boîtes a-t-il changé dans le HTML?

Changez pour flex-direction: column-reverse:

.container {
    background-color: #e3f2fd;
    border: 3px dashed #1976d2;
    padding: 20px;
    min-height: 400px;
    display: flex;
    flex-direction: column-reverse;
}

• Quel changement observez-vous?

Phase 3: Retour en rangée

Revenez à la direction par défaut:

.container {
    background-color: #e3f2fd;
    border: 3px dashed #1976d2;
    padding: 20px;
    min-height: 400px;
    display: flex;
    flex-direction: row;
}

info

flex-direction contrôle la direction principale du conteneur:

• row : Horizontal, de gauche à droite (défaut)
• row-reverse : Horizontal, de droite à gauche
• column : Vertical, de haut en bas
• column-reverse : Vertical, de bas en haut

Partie 3: Alignement horizontal avec justify-content

justify-content aligne les éléments le long de l'axe principal (horizontal si row, vertical si column).

Phase 1: Centrer les boîtes horizontalement

Ajoutez justify-content: center:

.container {
    background-color: #e3f2fd;
    border: 3px dashed #1976d2;
    padding: 20px;
    min-height: 400px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

• Comment cela a-t-il changé la disposition des boîtes?

Phase 2: Espacer les boîtes

Essayez justify-content: space-between:

.container {
    background-color: #e3f2fd;
    border: 3px dashed #1976d2;
    padding: 20px;
    min-height: 400px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

• Comment l'espace est-il distribué?
• Y a-t-il de l'espace avant la première boîte? Et après la dernière?

info

space-between distribue l'espace équitablement entre les éléments, mais n'ajoute pas d'espace au début, ni à la fin du conteneur.

Phase 3: Espace autour

Essayez justify-content: space-around:

.container {
    background-color: #e3f2fd;
    border: 3px dashed #1976d2;
    padding: 20px;
    min-height: 400px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

• Quelle est la différence avec space-between?
• L'espace entre les boîtes est-il le même qu'à gauche de la première?

info

space-around distribue l'espace équitablement entre les éléments et ajoute un espace correspondant à la moitié de l'espace entre les éléments, au début et à la fin du conteneur.

Phase 4: Espace égal partout

Essayez justify-content: space-evenly:

.container {
    background-color: #e3f2fd;
    border: 3px dashed #1976d2;
    padding: 20px;
    min-height: 400px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

• Comment est l'espacement maintenant?
• Quelle est la différence avec space-around?

info

space-evenly distribue l'espace équitablement entre les éléments et ajoute le même espace au début et à la fin du conteneur.

Phase 5: Garder justify-content: center

Retournez à justify-content: center;:

.container {
    background-color: #e3f2fd;
    border: 3px dashed #1976d2;
    padding: 20px;
    min-height: 400px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

info

justify-content distribue l'espace le long de l'axe principal (horizontal si row, vertical si column):

• flex-start: Au début (défaut)
• flex-end: À la fin
• center: Au centre
• space-between: Espace entre les éléments (pas aux extrémités)
• space-around: Espace autour de chaque élément
• space-evenly: Espace égal partout

Partie 4: Alignement vertical avec align-items

align-items aligne les éléments le long de l'axe secondaire (vertical si row, horizontal si column).

Phase 1: Centrer verticalement

Ajoutez align-items: center:

.container {
    background-color: #e3f2fd;
    border: 3px dashed #1976d2;
    padding: 20px;
    min-height: 400px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

• Où sont les boîtes verticalement?

Phase 2: Aligner en haut

Changez pour align-items: flex-start:

.container {
    background-color: #e3f2fd;
    border: 3px dashed #1976d2;
    padding: 20px;
    min-height: 400px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}

• Les boîtes sont-elles alignées en haut?

Phase 3: Aligner en bas

Essayez align-items: flex-end:

.container {
    background-color: #e3f2fd;
    border: 3px dashed #1976d2;
    padding: 20px;
    min-height: 400px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
}

• Les boîtes sont-elles alignées en bas?

Phase 4: Retour au centre

Revenez à align-items: center pour la suite:

.container {
    background-color: #e3f2fd;
    border: 3px dashed #1976d2;
    padding: 20px;
    min-height: 400px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

info

align-items aligne les éléments sur l'axe secondaire:

• stretch: Étire pour remplir le conteneur (défaut)
• flex-start: Au début
• flex-end: À la fin
• center: Au centre
• baseline: Alignés sur la ligne de base du texte

Partie 5: Retour à la ligne avec flex-wrap

Par défaut, les éléments flex restent sur une seule ligne. Explorons le comportement avec plusieurs éléments.

Phase 1: Ajouter plus de boîtes (dans le HTML)

Ajoutez une sixième boîte dans votre HTML après la boîte 5:

<!-- ... -->
<body>
    <h1>Découverte Flexbox</h1>
    
    <div class="container">
        <div class="box box-1">1</div>
        <div class="box box-2">2</div>
        <div class="box box-3">3</div>
        <div class="box box-4">4</div>
        <div class="box box-5">5</div>
        <div class="box box-6">6</div>
    </div>
</body>
<!-- ... -->

Et dans votre CSS, ajoutez le style pour cette nouvelle boîte:

.box-6 {
    background-color: #00bcd4;
}

• Que se passe-t-il? Les boîtes ont-elles rétréci?

Phase 2: Activer le retour à la ligne

Ajoutez flex-wrap: wrap:

.container {
    background-color: #e3f2fd;
    border: 3px dashed #1976d2;
    padding: 20px;
    min-height: 400px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

• Les boîtes passent-elles maintenant à la ligne?
• Rétrécissez la largeur de votre navigateur. Que se passe-t-il?

Phase 3: Retirer la 6e boîte

Enlevez la boîte 6 du HTML pour revenir à 5 boîtes. Gardez flex-wrap: wrap dans le CSS.

info

flex-wrap contrôle si les éléments doivent passer à la ligne:

• nowrap: Pas de retour à la ligne (défaut)
• wrap: Retour à la ligne si nécessaire
• wrap-reverse : Retour à la ligne en ordre inverse

Partie 6: Espacement avec gap

Au lieu d'utiliser des marges sur chaque boîte, gap crée de l'espace entre les éléments flex.

Ajouter de l'espace entre les boîtes

Ajoutez gap: 15px:

.container {
    background-color: #e3f2fd;
    border: 3px dashed #1976d2;
    padding: 20px;
    min-height: 400px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

• Un espace apparaît-il entre les boîtes?
• Essayez gap: 30px pour voir la différence.

Revenez à gap: 15px:

.container {
    background-color: #e3f2fd;
    border: 3px dashed #1976d2;
    padding: 20px;
    min-height: 400px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

info

gap définit l'espace entre les éléments flex. C'est plus simple que d'utiliser des marges! Vous pouvez aussi utiliser:

• gap: 20px : Même espacement horizontal et vertical
• gap: 20px 10px : 20px vertical, 10px horizontal
• row-gap et column-gap: Contrôle séparé

Partie 7: Faire grandir un élément avec flex-grow

flex-grow permet à un élément de prendre plus d'espace disponible.

Faire grandir la boîte 2

Ajoutez flex-grow: 1 à .box-2:

.box-2 {
    background-color: #9c27b0;
    flex-grow: 1;
}

• Que se passe-t-il avec la boîte 2?
• Prend-elle plus d'espace que les autres?
• Essayez de rétrécir et agrandir la largeur du navigateur. Comment la boîte 2 réagit-elle?

info

flex-grow détermine comment un élément grandit pour remplir l'espace disponible:

• 0 : Ne grandit pas (défaut)
• 1 : Prend l'espace disponible
• 2 : Prend 2× plus d'espace qu'un élément avec flex-grow: 1

Si plusieurs éléments ont flex-grow, l'espace est distribué proportionnellement.

Partie 8: Réorganiser avec order

order permet de changer l'ordre visuel des éléments sans modifier le HTML.

Déplacer la boîte 5 au début

Ajoutez order: -1 à .box-5:

.box-5 {
    background-color: #ff9800;
    order: -1;
}

• Où est la boîte 5 maintenant?
• L'ordre a-t-il changé dans le HTML? (Vérifiez le code source)

Expérimenter avec order

Essayez d'ajouter différentes valeurs d'order aux autres boîtes entre 0 et 4.

• Comment les boîtes sont-elles ordonnées?
• Que se passe-t-il si deux boîtes ont le même order?

Retirer les propriétés order

Enlevez toutes les propriétés order que vous avez ajoutées pour revenir à l'ordre normal.

info

order change l'ordre d'affichage des éléments:

• Valeur par défaut: 0
• Les valeurs négatives placent les éléments au début
• Les valeurs positives placent les éléments à la fin
• En cas d'égalité, l'ordre du HTML est respecté

Partie 9: Alignement individuel avec align-self

align-self permet à un élément de s'aligner différemment des autres.

Aligner la boîte 3 différemment

Ajoutez align-self: flex-start à .box-3:

.box-3 {
    background-color: #2196f3;
    align-self: flex-start;
}

• Où est la boîte 3 maintenant?
• Les autres boîtes ont-elles bougé?

Essayez align-self: flex-end:

.box-3 {
    background-color: #2196f3;
    align-self: flex-end;
}

Enlevez align-self de .box-3 pour terminer.

info

align-self permet à un élément individuel d'avoir un alignement différent:

• auto: Utilise la valeur du conteneur (défaut)
• flex-start, flex-end, center, stretch : Même valeurs qu'align-items

C'est utile quand un seul élément doit être aligné différemment!

Bravo! Vous maîtrisez maintenant les bases de Flexbox! 🎉