Display, Positionnement & Flexbox
Utilisez les flèches, cliquez ou glissez pour naviguer
1. Comprendre les modes d'affichage
block, inline, inline-block
2. Maîtriser le positionnement
relative, absolute, fixed, sticky
3. Utiliser Flexbox
Aligner et distribuer les éléments
4. Créer des patterns courants
Header, navigation, cards
Module 1
Les modes d'affichage (display)
Module 2
Le positionnement CSS
Module 3
Flexbox - L'outil principal
Module 4
Patterns courants & Pièges
Les modes d'affichage
Comprendre comment les éléments occupent l'espace
display
Détermine comment un élément s'affiche et interagit avec ses voisins
Pourquoi ? Sans comprendre display, impossible de maîtriser le layout !
Block
Inline
Combine les avantages de block et inline
âś“ Reste sur la ligne
Comme inline
âś“ width/height
Comme block
âś“ margin/padding
Tous les côtés
Exemple : Boutons cĂ´te Ă cĂ´te
display: block
display: inline
inline-block
Quels éléments sont block ou inline par défaut ?
Block par défaut
<div>, <p>, <h1>-<h6>
<ul>, <ol>, <li>
<header>, <footer>, <section>
<article>, <aside>, <nav>
Inline par défaut
<span>, <a>, <strong>
<em>, <img>, <br>
<input>, <button>
<label>, <code>
Le positionnement CSS
Sortir du flux normal pour placer les éléments précisément
static
Par défaut
relative
DĂ©calage
absolute
Hors flux
fixed
Viewport
sticky
Hybride
Comportement par défaut de tous les éléments
.box {
position: static; /* par défaut */
}
• Les éléments s'affichent dans l'ordre du HTML
• top, left, bottom, right n'ont aucun effet
• L'élément reste dans le flux normal
L'élément reste dans le flux mais peut être décalé
.box {
position: relative;
top: 20px;
left: 30px;
}
Important : L'espace original est préservé ! Les autres éléments ne bougent pas.
⚠️ Concept clé : l'élément est retiré du flux normal
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
right: 0;
}
Positionné par rapport au premier ancêtre positionné
Parent (position: relative)
↑ L'élément absolute "flotte" au-dessus
Sans absolute :
Avec absolute sur Box 2 :
Box 3 remonte !
Conséquence : Les autres éléments ignorent l'élément absolute et occupent son espace.
L'élément reste fixe même lors du scroll
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
Cas d'usage
Headers fixes, boutons flottants, modales
Attention
Sort du flux comme absolute
Se comporte comme relative, puis fixed au scroll
.nav {
position: sticky;
top: 0;
}
1. Normal
Dans le flux
2. Seuil atteint
Devient fixed
3. Parent fini
Retour au flux
Oubli du position: relative sur le parent
❌ Incorrect
.parent { /* pas de position */ }
.child {
position: absolute;
}
→ Positionné par rapport au body !
âś“ Correct
.parent {
position: relative;
}
.child {
position: absolute;
}
→ Positionné par rapport au parent
Flexbox
L'outil principal pour le layout
Résout 90% des problèmes de mise en page
Avant Flexbox, centrer Ă©tait un cauchemar...
❌ Avant (float, display: table...)
âś“ Avec Flexbox
.container {
display: flex;
}
• Les enfants deviennent des flex items
• Ils s'alignent sur une ligne par défaut (row)
• Ils prennent automatiquement la même hauteur
Main Axis
Axe principal (horizontal par défaut)
justify-content
Cross Axis
Axe transversal (vertical par défaut)
align-items
Confusion entre justify-content et align-items
justify-content
Axe principal (horizontal par défaut)
↔ Distribution horizontale
align-items
Axe transversal (vertical par défaut)
↕ Alignement vertical
Astuce : Avec flex-direction: column, les axes s'inversent !
flex-direction: row
→ Horizontal (par défaut)
flex-direction: column
→ Vertical
La façon moderne d'espacer les flex items
.container {
display: flex;
gap: 1rem;
}
❌ Avant (margin)
.item { margin-right: 1rem; }
.item:last-child { margin-right: 0; }
âś“ Maintenant (gap)
.container { gap: 1rem; }
Patterns courants & Pièges
Appliquer les concepts à des cas réels
margin: auto
.box {
width: 200px;
margin: 0 auto;
}
âś“ Centrage horizontal uniquement
âś“ NĂ©cessite une largeur fixe
Flexbox
.container {
display: flex;
justify-content: center;
align-items: center;
}
âś“ Centrage horizontal ET vertical
âś“ Pas de largeur fixe requise
Confusion entre margin: auto et Flexbox pour centrer
❌ Mauvais choix
Utiliser margin: auto pour centrer verticalement
→ Ne fonctionne pas !
âś“ Bon choix
Utiliser Flexbox pour un centrage complet
→ justify-content + align-items
Règle : margin: auto = centrage horizontal simple | Flexbox = centrage complet
/* HTML */
<header>
<h1>Mon Site</h1>
</header>
/* CSS */
header {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
}
RĂ©sultat :
.cards {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
Card 1
Description
Card 2
Description
Card 3
Description
flex-wrap: wrap permet aux cards de passer Ă la ligne suivante
1. display
LA propriété la plus importante pour le layout
2. position: absolute
Sort l'élément du flux normal
3. Flexbox
Résout 90% des problèmes de layout
4. Axes
justify = principal, align = transversal
1. Oubli du position: relative sur le parent
→ absolute se positionne par rapport au body
2. Confusion justify-content vs align-items
→ justify = axe principal, align = axe transversal
3. margin: auto pour centrer verticalement
→ Utiliser Flexbox avec align-items: center
flexboxfroggy.com
Un jeu pour maîtriser Flexbox de manière ludique
CSS Tricks
A Complete Guide to Flexbox
MDN Web Docs
Documentation officielle
Merci ! Questions ?