Flexbox

Mise en page flexible avec CSS

Séance 5 - DSP - USAL33

Rappel séance 4

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

Qu’est-ce que Flexbox ?

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 :

Élément	Rôle
Flex container	Parent avec display: flex
Flex items	Enfants directs du container

<div class="container">    
    <div>Item 1</div>      
    <div>Item 2</div>      
    <div>Item 3</div>      
</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

Les axes de Flexbox

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 du container

Propriétés principales du container

Propriété	Effet
flex-direction	Direction de l’axe principal
justify-content	Alignement sur l’axe principal
align-items	Alignement sur l’axe perpendiculaire
flex-wrap	Retour à la ligne
gap	Espacement entre items

flex-direction

Contrôle la direction de l’axe principal

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

Valeur	Effet
row	Horizontal de gauche à droite
row-reverse	Horizontal de droite à gauche
column	Vertical de haut en bas
column-reverse	Vertical de bas en haut

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 */
}

Valeur	Effet
nowrap	Tous sur une ligne
wrap	Passe à la ligne si nécessaire

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 items

Propriétés des flex items

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

Propriété	Effet
flex-grow	Capacité à grandir
flex-shrink	Capacité à rétrécir
flex-basis	Taille de base
flex	Raccourci des trois 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 d’usage pratiques

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

Combinaisons utiles

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

Exercice pratique

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;
}

Résumé

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

Prochaine séance

TP5 : Mise en pratique de Flexbox

Création de layouts complets avec Flexbox

Questions ?