Ce que nous avons vu

Box Model

• Content, Padding, Border, Margin
• box-sizing: border-box

Positionnement

• relative, absolute, fixed, sticky
• z-index

Aujourd'hui :

• Flexbox pour créer des layouts flexibles
• Alignement et distribution d'espace
• Cas d'usage pratiques

Flexbox : mise en page flexible

Flexbox = système de mise en page unidimensionnel

On organise les éléments :

• Soit en ligne (horizontalement)
• Soit en colonne (verticalement)

Avantages :

• Alignement facile
• Distribution automatique de l'espace
• Ordre flexible des éléments
• Adaptation responsive

Concepts de base

Deux types d'éléments :

<div class="container">    <!-- Flex container -->
    <div>Item 1</div>      <!-- Flex item -->
    <div>Item 2</div>      <!-- Flex item -->
    <div>Item 3</div>      <!-- Flex item -->
</div>

.container {
    display: flex;
}

Activer Flexbox

.container {
    display: flex;
}

Effet immédiat :

• Les enfants se placent en ligne (côte à côte)
• Ils gardent leur largeur naturelle
• Ils s'étirent pour avoir la même hauteur

C'est tout ce qu'il faut pour commencer

Main axis et Cross axis

┌──────────────────────────────────────┐
│          Main Axis (axe principal)   │
│          ←─────────────────→         │
│   ↑                                  │
│   │      ┌───┐  ┌───┐  ┌───┐         │
│ Cross    │ 1 │  │ 2 │  │ 3 │         │
│  Axis    └───┘  └───┘  └───┘         │
│   │                                  │
│   ↓                                  │
└──────────────────────────────────────┘

Main axis : direction des items (horizontal par défaut)
Cross axis : perpendiculaire (vertical par défaut)

Pourquoi ces axes sont importants ?

Les propriétés Flexbox agissent selon ces axes :

Sur le Main axis :

• justify-content : aligne et distribue l'espace

Sur le Cross axis :

• align-items : aligne les items

Comprendre les axes = comprendre Flexbox

Propriétés principales du container

flex-direction

Contrôle la direction de l'axe principal

.container {
    display: flex;
    flex-direction: row; /* Défaut */
}

Exemple flex-direction

/* Disposition horizontale */
.container {
    display: flex;
    flex-direction: row;
}

Résultat : [1] [2] [3]

/* Disposition verticale */
.container {
    display: flex;
    flex-direction: column;
}

Résultat :

[1]
[2]
[3]

justify-content

Distribue l'espace le long de l'axe principal

.container {
    display: flex;
    justify-content: flex-start; /* Défaut */
}

Valeurs courantes :

• flex-start : au début
• center : au centre
• flex-end : à la fin
• space-between : espace entre les items
• space-around : espace autour des items

Exemples justify-content

justify-content: flex-start;

Résultat : [1][2][3]

justify-content: center;

Résultat : [1][2][3]

justify-content: space-between;

Résultat : [1] [2] [3]

justify-content: space-around;

Résultat : [1] [2] [3]

align-items

Aligne les items sur l'axe perpendiculaire

.container {
    display: flex;
    align-items: stretch; /* Défaut */
}

Valeurs courantes :

• stretch : s'étire pour remplir
• flex-start : en haut
• center : au centre
• flex-end : en bas

Exemples align-items

.container {
    display: flex;
    height: 200px;
    align-items: flex-start;
}

Items alignés en haut

.container {
    display: flex;
    height: 200px;
    align-items: center;
}

Items centrés verticalement

flex-wrap

Contrôle le passage à la ligne

.container {
    display: flex;
    flex-wrap: nowrap; /* Défaut */
}

Utilité : Créer des grilles responsives

Exemple flex-wrap

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.item {
    width: 200px;
}

Résultat :

• Si le container fait 700px : 3 items sur la première ligne
• Si le container fait 450px : 2 items par ligne
• Adaptation automatique

gap

Espacement entre les items

.container {
    display: flex;
    gap: 20px;
}

Avantages :

• Plus simple que d'utiliser des marges
• Pas d'espace au bord
• Un seul endroit à modifier

Alternative à :

.item {
    margin-right: 20px;
}

Propriétés des flex items

Les items peuvent avoir leurs propres propriétés :

Pour débuter, nous utiliserons principalement flex

flex: 1

L'item prend tout l'espace disponible

.item {
    flex: 1;
}

Si tous les items ont flex: 1 :
Ils se partagent l'espace équitablement

Si un seul item a flex: 1 :
Il prend tout l'espace restant

Exemple flex: 1

<div class="container">
    <div class="item">Item 1</div>
    <div class="item grow">Item 2</div>
    <div class="item">Item 3</div>
</div>

.container {
    display: flex;
}

.grow {
    flex: 1; /* Prend l'espace disponible */
}

Résultat : Item 2 est plus large que les autres

Items de taille fixe

.item-fixed {
    flex: 0 0 200px;
}

Signification :

• 0 : ne grandit pas
• 0 : ne rétrécit pas
• 200px : taille fixe de 200px

Usage : Sidebars, éléments de taille fixe

Cas 1 : Centrage parfait

<div class="container">
    <div class="box">Centré</div>
</div>

.container {
    display: flex;
    justify-content: center; /* Horizontal */
    align-items: center;     /* Vertical */
    height: 400px;
}

Résultat : L'élément est centré horizontalement et verticalement

Avant Flexbox, c'était compliqué

Cas 2 : Navbar horizontale

<nav class="navbar">
    <div class="logo">MonSite</div>
    <ul class="menu">
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.menu {
    display: flex;
    gap: 20px;
    list-style: none;
}

Cas 3 : Layout en colonnes

<div class="container">
    <aside class="sidebar">Sidebar</aside>
    <main class="content">Contenu</main>
</div>

.container {
    display: flex;
    gap: 20px;
}

.sidebar {
    flex: 0 0 250px; /* Largeur fixe */
}

.content {
    flex: 1; /* Prend le reste */
}

Cas 4 : Cartes responsives

<div class="cards">
    <div class="card">Carte 1</div>
    <div class="card">Carte 2</div>
    <div class="card">Carte 3</div>
    <div class="card">Carte 4</div>
</div>

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    flex: 1 1 250px; /* Min 250px, peut grandir */
}

S'adapte automatiquement à la largeur de l'écran

Cas 5 : Footer en bas de page

<body>
    <header>En-tête</header>
    <main>Contenu</main>
    <footer>Pied de page</footer>
</body>

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1; /* Prend tout l'espace */
}

Le footer reste en bas même si le contenu est court

Cas 6 : Éléments de même hauteur

<div class="container">
    <div class="box">Petit texte</div>
    <div class="box">Texte beaucoup plus long...</div>
    <div class="box">Moyen</div>
</div>

.container {
    display: flex;
}

.box {
    flex: 1;
    padding: 20px;
}

Toutes les boîtes ont la même hauteur automatiquement

Centrer un élément

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

Usage : Messages d'erreur, spinners de chargement

Espacer deux éléments

.container {
    display: flex;
    justify-content: space-between;
}

Usage : Navbar avec logo à gauche et menu à droite

Alignement vertical

.container {
    display: flex;
    align-items: center;
    height: 60px;
}

Usage : Éléments d'une barre de navigation

Grille flexible

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.item {
    flex: 1 1 300px;
}

Usage : Galeries d'images, listes de produits

Créer une carte avec Flexbox

Objectif : Carte avec image à gauche, contenu à droite

<div class="card">
    <img src="image.jpg" alt="Photo">
    <div class="card-content">
        <h3>Titre</h3>
        <p>Description...</p>
        <button>Lire plus</button>
    </div>
</div>

À vous de jouer :
Utilisez Flexbox pour aligner l'image et le contenu horizontalement

Solution

.card {
    display: flex;
    gap: 20px;
    padding: 20px;
    border: 1px solid #ddd;
}

.card img {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

.card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

Points clés Flexbox

Pour commencer avec Flexbox :

1. display: flex; sur le container
2. flex-direction pour choisir la direction
3. justify-content pour distribuer sur l'axe principal
4. align-items pour aligner sur l'axe perpendiculaire
5. gap pour espacer les items

Sur les items :

• flex: 1 pour prendre l'espace disponible
• flex: 0 0 200px pour une taille fixe

Quand utiliser Flexbox ?

Flexbox est idéal pour :

• Barres de navigation
• Composants alignés horizontalement ou verticalement
• Centrage d'éléments
• Distribution d'espace entre éléments

Moins adapté pour :

• Grilles complexes en 2D (utilisez CSS Grid)

DevTools et Flexbox

Dans les DevTools :

• Sélectionnez un élément avec display: flex
• Voyez les propriétés Flexbox appliquées
• Testez différentes valeurs en direct

Astuce : Firefox et Chrome ont des outils de visualisation Flexbox