TP5 : Layouts avec Flexbox

Cours HTML/CSS 2026 – Durée : 3h30 – Enseignant : Quentin Fait

Objectifs du TP

  • Créer des layouts avec Flexbox

  • Utiliser justify-content et align-items pour aligner

  • Combiner plusieurs containers Flexbox

  • Créer des grilles adaptatives avec flex-wrap

Consignes générales

Configuration : Créez un dossier tp5-flexbox sur votre ordinateur et ouvrez-le dans votre éditeur de code.

Rappel de la structure HTML de base :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de la page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    
</body>
</html>

Important : Testez régulièrement en redimensionnant votre fenêtre pour voir l’adaptation.

Exercice : Dashboard avec Flexbox

Fichiers : dashboard.html, dashboard.css

Créez un tableau de bord complet qui utilise Flexbox pour tous ses composants.

Partie HTML (dashboard.html)

Structure à créer :

2. Layout principal

Créez un <div class="layout"> contenant deux zones :

a) Sidebar : Un <aside class="sidebar"> contenant :

  • Un <ul class="menu"> avec 5 éléments de liste :

    • Accueil

    • Statistiques

    • Projets

    • Messages

    • Paramètres

b) Contenu principal : Une <main class="content"> contenant :

Zone 1 - Header du contenu :

  • Un <div class="content-header"> avec :

    • Un <h1>Bienvenue sur votre tableau de bord</h1>

    • Un <button class="btn-new">+ Nouveau projet</button>

Zone 2 - Cartes de statistiques :

  • Une <section class="stats"> contenant 4 <div class="stat-card">, chacune avec :

    • Un <h3> avec un titre (ex: « Projets », « Messages », « Tâches », « Utilisateurs »)

    • Un <p class="number"> avec un chiffre (ex: « 12 », « 48 », « 7 », « 156 »)

    • Un <p class="label"> avec un texte (ex: « En cours », « Non lus », « Urgentes », « Actifs »)

Zone 3 - Activité récente :

  • Une <section class="activity"> contenant :

    • Un <h2>Activité récente</h2>

    • 3 <div class="activity-item">, chacune avec :

      • Un <div class="activity-time"> avec une heure (ex: « Il y a 2h »)

      • Un <p> avec une description d’activité

Partie CSS (dashboard.css)

Étape 1 : Reset de base

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    color: #333;
}

Étape 2 : Navigation horizontale

Ciblez navbar et créez une barre de navigation :

  • display: flex;

  • Espacer logo et user-info : justify-content: space-between;

  • Aligner verticalement : align-items: center;

  • Fond : #2c3e50

  • Texte blanc

  • Padding : 15px 30px

Ciblez logo et appliquez :

  • Taille : 22px

  • Graisse : bold

Ciblez user-info et créez un groupe aligné :

  • display: flex;

  • Espacement entre les éléments : gap: 15px;

  • align-items: center;

Ciblez le bouton dans user-info :

  • Padding : 8px 15px

  • Fond : #e74c3c

  • Texte blanc

  • Bordure : none

  • Coins arrondis : 4px

  • Cursor : pointer

Au survol, changez le fond en #c0392b

Étape 3 : Layout principal (sidebar + contenu)

Ciblez layout et créez un layout horizontal :

  • display: flex;

  • Hauteur minimale : min-height: calc(100vh - 52px); (hauteur écran - navbar)

Étape 4 : Sidebar verticale

Ciblez sidebar et créez une colonne fixe :

  • Largeur fixe : flex: 0 0 220px;

  • Fond : #34495e

  • Texte blanc

  • Padding : 30px 0

Ciblez menu et créez une liste verticale :

  • display: flex;

  • flex-direction: column;

  • Espacement : gap: 5px;

  • list-style: none;

Ciblez les éléments de liste dans menu :

  • Padding : 12px 25px

  • Transition : 0.3s sur background-color

  • Cursor : pointer

Au survol des éléments de liste, ajoutez un fond : background-color: #2c3e50;

Ajoutez une bordure gauche de 3px sur le premier élément (actif) :

.menu li:first-child {
    background-color: #2c3e50;
    border-left: 3px solid #3498db;
}

Étape 5 : Zone de contenu principale

Ciblez content et créez une zone flexible :

  • flex: 1; (prend tout l’espace restant)

  • Fond : #ecf0f1

  • Padding : 30px

Étape 6 : Header du contenu

Ciblez content-header et alignez titre et bouton :

  • display: flex;

  • Espacement : justify-content: space-between;

  • Alignement vertical : align-items: center;

  • Marge basse : 30px

Ciblez le <h1> dans content-header :

  • Taille : 28px

  • Couleur : #2c3e50

Ciblez btn-new et appliquez :

  • Padding : 12px 24px

  • Fond : #3498db

  • Texte blanc

  • Bordure : none

  • Coins arrondis : 4px

  • Cursor : pointer

  • Graisse : bold

Au survol, changez le fond en #2980b9

Étape 7 : Grille de statistiques

Ciblez stats et créez une grille flexible :

  • display: flex;

  • Passage à la ligne : flex-wrap: wrap;

  • Espacement : gap: 20px;

  • Marge basse : 30px

Étape 8 : Cartes de statistiques

Ciblez stat-card et créez des cartes :

  • Largeur flexible : flex: 1 1 200px; (minimum 200px, peut grandir)

  • Fond blanc

  • Padding : 25px

  • Coins arrondis : 8px

  • Bordure : 1px solid #ddd

  • Alignement du texte centré

Ciblez le <h3> dans stat-card :

  • Taille : 16px

  • Couleur : #7f8c8d

  • Marge basse : 10px

Ciblez number et appliquez :

  • Taille : 42px

  • Couleur : #3498db

  • Graisse : bold

  • Marge basse : 5px

Ciblez label et appliquez :

  • Taille : 13px

  • Couleur : #95a5a6

Étape 9 : Section activité

Ciblez activity et appliquez :

  • Fond blanc

  • Padding : 25px

  • Coins arrondis : 8px

  • Bordure : 1px solid #ddd

Ciblez le <h2> dans activity :

  • Taille : 22px

  • Couleur : #2c3e50

  • Marge basse : 20px

Étape 10 : Items d’activité

Ciblez activity-item et créez des lignes :

  • display: flex;

  • Espacement : gap: 15px;

  • Padding : 15px 0

  • Bordure basse : 1px solid #ecf0f1

Pour le dernier item, supprimez la bordure :

.activity-item:last-child {
    border-bottom: none;
}

Ciblez activity-time et appliquez :

  • Largeur fixe : flex: 0 0 100px;

  • Taille : 13px

  • Couleur : #95a5a6

Ciblez les <p> dans activity-item :

  • flex: 1; (prend le reste de l’espace)

  • Couleur : #555

  • Interligne : 1.5

Rendu attendu

Un dashboard complet avec :

  • Navigation horizontale (logo à gauche, info utilisateur à droite)

  • Sidebar fixe à gauche (220px)

  • Zone principale qui prend le reste de l’espace

  • Header avec titre à gauche et bouton à droite

  • 4 cartes de statistiques qui s’adaptent :

    • 4 cartes sur grand écran

    • 2 cartes sur écran moyen

    • 1 carte sur petit écran

  • Section activité avec éléments alignés horizontalement

Test : Redimensionnez la fenêtre pour voir les cartes s’adapter automatiquement.

Livrables attendus

Un dossier tp5-flexbox contenant :

  • dashboard.html

  • dashboard.css

Pensez à valider votre code avec le validateur W3C : https://validator.w3.org/

Critères d’évaluation

  • Flexbox : utilisation correcte sur tous les composants

  • Alignement : justify-content et align-items appropriés

  • Direction : flex-direction: column pour la sidebar

  • Flexibilité : flex: 1 pour les zones qui s’adaptent

  • Grille responsive : cartes qui s’adaptent avec flex-wrap

  • Validation W3C : code valide

Points de vérification

Votre dashboard doit utiliser Flexbox pour :

  • La navbar (alignement horizontal)

  • Le layout principal (sidebar + contenu)

  • La sidebar (menu vertical)

  • Le header du contenu (titre + bouton)

  • La grille de statistiques (4 cartes adaptatives)

  • Chaque item d’activité (heure + description)

Chaque zone doit avoir display: flex;