Séance 5 : Flexbox (Flexible Box Layout Module) - La Mise en Page Unidimensionnelle

1. Maîtriser la Mise en Page Flexible

1.1 Rappel des Séances Précédentes

Nous avons déjà exploré la structure HTML, les sélecteurs CSS et le Modèle de Boîte. Vous savez maintenant comment définir la taille et l'espacement des éléments. Avec CSS Grid, vous avez appris à structurer des mises en page complexes en deux dimensions. Cependant, pour des mises en page plus simples et des distributions d'éléments sur une seule ligne ou colonne, Flexbox est l'outil idéal.

1.2 Introduction à Flexbox

Flexbox (Flexible Box Layout Module) est un module de mise en page CSS qui permet d'organiser des éléments dans une seule dimension (soit en ligne, soit en colonne). Il est idéal pour distribuer l'espace entre les éléments d'une interface et pour les aligner facilement.

Pensez à Flexbox comme à un moyen de rendre vos éléments "flexibles" pour qu'ils puissent s'adapter à l'espace disponible.

1.2.1 Conteneur Flex et Éléments Flex

Pour utiliser Flexbox, vous devez définir un conteneur flex et ses éléments flex (enfants directs). C'est le conteneur qui contrôle la mise en page de ses enfants.

<div class="flex-container"> <!-- Conteneur Flex -->
    <div class="flex-item">Item 1</div> <!-- Élément Flex -->
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
</div>
.flex-container {
    display: flex; /* Transforme l'élément en conteneur flex */
    background-color: #F0F8FF; /* Pour visualiser le conteneur */
    padding: 15px;
    border: 1px solid #A5B4FC;
}
.flex-item {
    background-color: #BFDBFE; /* Pour visualiser les éléments */
    padding: 10px;
    border: 1px solid #60A5FA;
    margin: 5px;
}

1.2.2 Axe Principal et Axe Transversal

Flexbox fonctionne avec deux axes :

1.2.3 Propriétés du Conteneur Flex (Parent)

Ces propriétés sont appliquées au conteneur flex pour contrôler la disposition de ses enfants.

1.2.4 Propriétés des Éléments Flex (Enfants)

Ces propriétés sont appliquées aux éléments flex (les enfants directs du conteneur flex).

1.3 Maîtriser les Proportions : La Propriété aspect-ratio

Un problème courant en CSS est de vouloir qu'un élément (comme une vidéo ou une image de carte produit) conserve ses proportions (par exemple, un ratio 16/9) lorsque sa largeur change. La propriété moderne aspect-ratio résout ce problème élégamment.

.video-container {
    width: 100%;
    aspect-ratio: 16 / 9; /* Le conteneur gardera ce ratio hauteur/largeur */
    background-color: black;
}

.video-container iframe {
    width: 100%;
    height: 100%;
}

2. Exercices d'Application

Pour chaque exercice, créez un nouveau fichier HTML et CSS (ou continuez sur les fichiers des séances précédentes si vous le souhaitez, en les organisant bien). N'oubliez pas de lier votre fichier CSS dans le <head> de votre HTML.

Exercice 1 : Flexbox Basique - Centrer des Éléments

Exercice 2 : Flexbox Avancé - Distribution d'Espace et Croissance

Exercice 3 : Barre de Navigation Horizontale

Exercice 4 : Carte de Produit Flexible

3. TP : Création d'un Layout de Galerie d'Images Flexible avec le Design System

Pour ce TP, vous allez utiliser Flexbox pour construire une galerie d'images qui s'adapte à la taille de l'écran, en intégrant notre Design System et la propriété aspect-ratio.

Objectif :

Concevoir une galerie d'images où les images s'affichent en ligne et se disposent de manière flexible, en passant à la ligne si l'espace est insuffisant, tout en maintenant des proportions cohérentes.

Consignes :

  1. Créez un nouveau dossier tp-seance5-flexbox avec index.html et styles.css.
  2. Dans index.html, créez une div principale <div class="gallery-container"> qui contiendra plusieurs divs <div class="gallery-item"> (au moins 6) simulant des images (vous pouvez juste mettre une couleur de fond et une taille).
  3. Dans votre styles.css :
    • Appliquez box-sizing: border-box; universellement.
    • Utilisation du Design System : Pour toutes les couleurs, espacements, tailles de police et ombres, utilisez les variables CSS de notre styles.css global (ex: var(--color-primary), var(--space-4), var(--font-size-base), var(--shadow-md)).
    • Conteneur de la galerie (.gallery-container) :
      • Définissez-le comme un conteneur flex (display: flex;).
      • Faites en sorte que les éléments passent à la ligne si l'espace est insuffisant (flex-wrap: wrap;).
      • Centrez les éléments horizontalement dans le conteneur (justify-content: center;).
      • Ajoutez un gap (espacement) entre les éléments de la galerie en utilisant une variable de notre Design System.
      • Donnez-lui une bordure et un padding pour le visualiser.
    • Éléments de la galerie (.gallery-item) :
      • Donnez-leur une taille de base (ex: flex-basis: 150px; pour une largeur initiale).
      • Permettez-leur de grandir (flex-grow: 1;) mais pas de rétrécir (flex-shrink: 0;) ou ajustez selon l'effet désiré.
      • Utilisez aspect-ratio: 1 / 1; pour que chaque élément de la galerie soit carré, quelle que soit sa largeur.
      • Donnez-leur une couleur de fond différente (via une variable) et une bordure.
      • Centrez leur contenu si nécessaire (ex: display: flex; justify-content: center; align-items: center; si vous mettez du texte dedans).
  4. Vérification : Ouvrez votre index.html dans le navigateur. Redimensionnez la fenêtre et observez comment les "images" se réorganisent et passent à la ligne de manière flexible pour s'adapter à l'espace disponible, tout en conservant leur forme carrée.