CSS Display

La propriété display contrôle comment un élément est affiché et détermine le type de boîte généré par l’élément.

Block & Inline
Flexbox
CSS Grid
Comparaison

Vue d’ensemble des propriétés display

La propriété CSS display contrôle comment un élément est affiché et détermine le type de boîte généré par l’élément.

Valeurs principales

display: block: Élément bloc
display: inline: Élément en ligne
display: inline-block: Inline avec propriétés block
display: flex: Conteneur flexible
display: grid: Grille bidimensionnelle
display: none: Élément masqué

Concepts fondamentaux

Contexte de formatage

Chaque élément crée un contexte qui détermine comment ses enfants sont disposés.
Direction principale

Block : vertical (haut en bas). Inline : horizontal (gauche à droite).
Conteneur vs Items

Flex et Grid définissent des règles pour le conteneur ET les éléments enfants.

Explorer les valeurs de display

display

Élément 1

Élément 2

Élément 3

display: ;

Testez les différentes valeurs de display : les trois éléments changent de disposition sans que leur balisage bouge.

Display block et inline

Les deux modes d’affichage fondamentaux qui définissent le comportement de base des éléments HTML.

Display: block

Caractéristiques

Occupe toute la largeur disponible
Commence sur une nouvelle ligne
Accepte width, height, margin, padding
Empile verticalement

css

.block-element {
    display: block;
    width: 100%;
    padding: 1rem;
    margin-bottom: 0.5rem;
}

Chacun occupe toute la largeur et commence sur une nouvelle ligne.

Display: inline

Caractéristiques

Suit le flux du texte
Largeur selon le contenu
Ignore width et height
Margin/padding vertical limité

css

.inline-element {
    display: inline;
    padding: 0.25rem 0.5rem;
    margin: 0 0.25rem;
}

Ils suivent le flux du texte sans casser la ligne.

Display: inline-block — le meilleur des deux mondes

Du inline : suit le flux horizontal, pas de saut de ligne
Du block : accepte width, height, margin, padding complets

css

.inline-block-element {
    display: inline-block;
    width: 150px;
    height: 80px;
    margin: 0.5rem;
    vertical-align: top;
}

Cas d’usage

Boutons côte à côte
Navigation horizontale
Grilles simples
Cards en ligne

Côte à côte, mais chacun accepte une largeur et une hauteur.

Display flex — Flexbox

Un système de mise en page unidimensionnel qui offre un contrôle puissant sur l’alignement et la distribution de l’espace.

Concepts fondamentaux

Axe principal (Main Axis): Direction principale du flux des éléments flex
Axe croisé (Cross Axis): Perpendiculaire à l’axe principal
Flex Container: Élément parent avec display: flex

Playground Flexbox interactif

flex-direction

justify-content

align-items

flex-wrap

Aperçu en temps réel

1

2

3

4

CSS actuel

Les quatre réglages se combinent : c’est leur assemblage qui fait la mise en page, pas chacun pris à part.

Propriétés du conteneur

css

.flex-container {
    display: flex;
    flex-direction: row | column;
    justify-content: flex-start | center | space-between;
    align-items: stretch | center | flex-start;
    flex-wrap: nowrap | wrap;
    gap: 1rem;
}

Propriétés des items

css

.flex-item {
    flex: 1;              /* grow shrink basis */
    flex-grow: 1;         /* peut grandir */
    flex-shrink: 1;       /* peut rétrécir */
    flex-basis: auto;     /* taille de base */
    align-self: center;   /* alignement individuel */
    order: 2;             /* ordre d'affichage */
}

Le cours complet sur Flexbox

Display grid — CSS Grid

Un système de mise en page bidimensionnel qui permet de créer des layouts complexes avec un contrôle précis des lignes et colonnes.

Grid simple

css

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 1rem;
}

1fr — fraction de l’espace disponible
auto — selon le contenu
100px — taille fixe
minmax(100px, 1fr) — taille flexible avec limites

Six éléments, trois colonnes : la deuxième ligne se crée d’elle-même.

Layout complexe avec areas

css

.layout-grid {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header"
        "sidebar main aside"
        "footer footer footer";
    gap: 1rem;
    min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }

Chaque zone occupe la place que le dessin lui donne dans le code.

Grid responsive auto-adaptatif

css

.auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

auto-fit — s’étend pour remplir l’espace
auto-fill — maintient la taille minimum
minmax() — taille min et max

Redimensionnez le cadre : le nombre de colonnes suit, sans media query.

Le cours complet sur CSS Grid

Comparaison et guide de choix

Quand utiliser block, inline, Flexbox ou Grid ? Guide pratique pour faire le bon choix selon votre contexte.

Tableau comparatif

Tableau comparatif
Propriété	Cas d’usage	Dimensions	Complexité	Support
block	Contenu, sections, divs	1D Vertical	Simple	Universel
inline	Texte, liens, spans	Flux de texte	Simple	Universel
inline-block	Boutons, navigation	Inline + Block	Moyen	Excellent
flex	Barres, alignements	1D Flexible	Avancé	Moderne
grid	Layouts, grilles	2D Complet	Expert	Récent

Guide de décision

Pour du contenu textuel : utilisez block et inline selon la sémantique HTML naturelle.
Pour aligner des éléments : Flexbox est parfait pour les barres de navigation, centrer des éléments, distribuer l’espace.
Pour des layouts complexes : CSS Grid excelle pour les mises en page 2D, les templates de site, les galeries.
Pour des éléments côte à côte : inline-block est simple et efficace pour des boutons, badges, ou éléments similaires.

Bonnes pratiques

Combinez les approches : Grid pour le layout global, Flex pour les composants internes.
Mobile first : commencez par des layouts simples, ajoutez la complexité progressivement.
Sémantique avant tout : respectez la structure HTML, le CSS vient ensuite.
Testez sur différents écrans : vos layouts doivent fonctionner de mobile à desktop.

Travaux pratiques

Mettez en pratique vos connaissances sur les propriétés display avec ces exercices progressifs et concrets.

Exercice 1 : barre de navigation responsive

Objectif

Créez une barre de navigation avec logo à gauche, menu au centre, et bouton connexion à droite.

Critères

Utilisez Flexbox pour l’alignement
Logo aligné à gauche
Menu centré avec justify-content
Bouton connexion à droite
Responsive : menu vertical sur mobile

Desktop : éléments répartis. Mobile : menu empilé.

Exercice 2 : layout de blog avec CSS Grid

Objectif

Créez un layout de blog complet avec header, sidebar, contenu principal et footer en utilisant CSS Grid.

Spécifications

Grid avec areas nommées
Header pleine largeur
Sidebar 300px fixe
Main content flexible
Footer pleine largeur
Responsive : 1 colonne sur mobile

Header et footer pleine largeur, sidebar fixe, contenu flexible.

Code de démarrage

html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercices Display CSS</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }
        
        /* ========== EXERCICE 1 : NAVIGATION ========== */
        .navbar {
            /* TODO: Utilisez Flexbox pour la navigation */
            background: #333;
            color: white;
            padding: 1rem;
        }
        
        .logo {
            font-weight: bold;
            font-size: 1.2rem;
        }
        
        .nav-menu {
            /* TODO: Menu centré */
            list-style: none;
        }
        
        .nav-menu li {
            /* TODO: Items en ligne */
            margin: 0 1rem;
        }
        
        .nav-menu a {
            color: white;
            text-decoration: none;
        }
        
        .nav-button {
            background: #007bff;
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            cursor: pointer;
        }
        
        /* ========== EXERCICE 2 : BLOG LAYOUT ========== */
        .blog-layout {
            /* TODO: CSS Grid avec areas */
            min-height: 100vh;
        }
        
        .blog-header {
            /* TODO: grid-area: header */
            background: #f8f9fa;
            padding: 2rem;
            text-align: center;
        }
        
        .blog-sidebar {
            /* TODO: grid-area: sidebar */
            background: #e9ecef;
            padding: 1rem;
        }
        
        .blog-main {
            /* TODO: grid-area: main */
            background: white;
            padding: 2rem;
        }
        
        .blog-footer {
            /* TODO: grid-area: footer */
            background: #343a40;
            color: white;
            padding: 1rem;
            text-align: center;
        }
        
        /* ========== RESPONSIVE ========== */
        @media (max-width: 768px) {
            .navbar {
                /* TODO: Navigation verticale sur mobile */
            }
            
            .blog-layout {
                /* TODO: 1 colonne sur mobile */
            }
        }
        
        /* ========== STYLES HELPER ========== */
        .article {
            background: #f8f9fa;
            margin-bottom: 1rem;
            padding: 1rem;
            border-radius: 4px;
        }
        
        .sidebar-widget {
            background: white;
            margin-bottom: 1rem;
            padding: 1rem;
            border-radius: 4px;
        }
    </style>
</head>

<body>
    <!-- EXERCICE 1 : NAVIGATION -->
    <nav class="navbar">
        <div class="logo">MonSite</div>
        <ul class="nav-menu">
            <li><a href="#">Accueil</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">À propos</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <button class="nav-button">Connexion</button>
    </nav>
    
    <!-- EXERCICE 2 : BLOG LAYOUT -->
    <div class="blog-layout">
        <header class="blog-header">
            <h1>Mon Blog Technique</h1>
            <p>Découvrez les dernières tendances en développement web</p>
        </header>
        
        <aside class="blog-sidebar">
            <div class="sidebar-widget">
                <h3>Catégories</h3>
                <ul>
                    <li>HTML/CSS</li>
                    <li>JavaScript</li>
                    <li>PHP</li>
                    <li>Frameworks</li>
                </ul>
            </div>
            
            <div class="sidebar-widget">
                <h3>Tags Populaires</h3>
                <p>React, Vue.js, CSS Grid, Flexbox, API</p>
            </div>
        </aside>
        
        <main class="blog-main">
            <article class="article">
                <h2>Maîtriser CSS Grid en 2024</h2>
                <p>CSS Grid révolutionne la façon dont nous créons des layouts web. Dans cet article, nous explorons les techniques avancées...</p>
            </article>
            
            <article class="article">
                <h2>Flexbox vs CSS Grid : Quand utiliser quoi ?</h2>
                <p>Comprendre les différences entre Flexbox et CSS Grid est essentiel pour tout développeur front-end moderne...</p>
            </article>
            
            <article class="article">
                <h2>Les nouvelles propriétés CSS qui changent tout</h2>
                <p>Container queries, :has(), aspect-ratio... Découvrez les propriétés CSS qui transforment notre approche du design...</p>
            </article>
        </main>
        
        <footer class="blog-footer">
            <p>© 2024 Mon Blog Technique - Tous droits réservés</p>
        </footer>
    </div>
</body>
</html>

Les commentaires TODO marquent ce qui reste à écrire. 176 lignes reprises telles quelles.

Tous les display sont acquis

Vous savez choisir entre block, inline, inline-block, flex et grid — et surtout les combiner. Grid pour la structure de la page, Flex pour l’intérieur des composants.

Approfondir Flexbox Approfondir CSS Grid

Les autres pages CSS

Les bases du CSS

Syntaxe, sélecteurs, modèle de boîte
Ouvrir le cours
Flexbox

Aligner sur un axe
Ouvrir le cours
Grid

Composer en deux dimensions
Ouvrir le cours
Responsive

S’adapter à chaque écran
Ouvrir le cours

CSS Display

Vue d’ensemble des propriétés display

Valeurs principales

Concepts fondamentaux

Contexte de formatage

Direction principale

Conteneur vs Items

Explorer les valeurs de display

Display block et inline

📦 Display: block

Caractéristiques

📝 Display: inline

Caractéristiques

Display: inline-block — le meilleur des deux mondes

Cas d’usage

Display flex — Flexbox

Concepts fondamentaux

Playground Flexbox interactif

Propriétés du conteneur

Propriétés des items

Display grid — CSS Grid

Grid simple

Layout complexe avec areas

Grid responsive auto-adaptatif

Comparaison et guide de choix

Tableau comparatif

Guide de décision

Bonnes pratiques

Travaux pratiques

Exercice 1 : barre de navigation responsive

Objectif

Critères

Exercice 2 : layout de blog avec CSS Grid

Objectif

Spécifications

Code de démarrage

Tous les display sont acquis

Les autres pages CSS

Les bases du CSS

Flexbox

Grid

Responsive

Display: block

Display: inline