Mises en page Flexbox courantes : navigation, cartes et objets média
Créez des barres de navigation, des grilles de cartes et des objets média pratiques avec flexbox.
Mises en page Flexbox courantes : navigation, cartes et objets média est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Pourquoi les modèles Flexbox sont importants
Certains modèles de mise en page apparaissent dans presque tous les projets web. Flexbox permet de résoudre chacun d’eux efficacement avec un minimum de CSS. La connaissance de ces modèles accélère le développement et réduit la quantité de code.
Modèle de barre de navigation
Une barre de navigation horizontale avec un logo à gauche et des liens à droite :
<nav class="navbar">
<span class="logo">Brand</span>
<div class="nav-links">
<a href="#">Home</a>
<a href="#">About</a>
</div>
</nav>
Section d’accueil centrée
Un contenu centré sur toute la hauteur avec Flexbox :
<div class="hero">
<h1>Welcome</h1>
</div>
Grille de cartes
Une grille de cartes réactive avec retour à la ligne et espacements cohérents :
<div class="card-grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
</div>
Objet média
L’objet média — une image de largeur fixe à côté d’un texte flexible — est un modèle d’interface fondamental utilisé dans les commentaires, les publications sur les réseaux sociaux et les éléments de liste :
<div class="media">
<img class="media-img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" alt="avatar" />
<div class="media-body">
<strong>Jane Doe</strong>
<p>Comment text goes here.</p>
</div>
</div>
Pied de page en bas avec flex
Placez le pied de page en bas sans définir de hauteurs fixes :
<main>Main content that grows to fill available space</main>
<footer>Footer</footer>
Bouton avec icône et texte
Une icône et un texte centrés verticalement dans un bouton :
<button class="btn">
<svg width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="currentColor"/></svg>
Download
</button>
Mise en page « Saint Graal » avec Flexbox
Une mise en page « Saint Graal » à trois colonnes (en-tête, pied de page, barre latérale-contenu principal-barre latérale) :
<div class="holy-grail">
<div class="left-sidebar">Left</div>
<div class="main-content">Main</div>
<div class="right-sidebar">Right</div>
</div>
Ligne de formulaire avec libellés
Des paires libellé-champ alignées dans une ligne de formulaire :
<div class="form-row">
<label>Email</label>
<input type="email" />
</div>
Galerie de vignettes
Une galerie d’images avec retour à la ligne :
<div class="gallery">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" alt="thumb" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23667eea'/><circle cx='150' cy='150' r='100' fill='%23764ba2'/></svg>" alt="thumb" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ffd700'/><circle cx='150' cy='150' r='100' fill='%23ff6347'/></svg>" alt="thumb" />
</div>
Liste de pastilles et d’étiquettes
Des pastilles et des étiquettes qui se placent sur plusieurs lignes comme du texte :
<div class="tags">
<span class="tag">CSS</span>
<span class="tag">Flexbox</span>
<span class="tag">Layout</span>
</div>
Vérification rapide
Dans le modèle de l’objet média, qu’est-ce qui empêche le corps du texte de déborder lorsqu’il contient une longue chaîne impossible à couper ?
Récapitulatif
Modèles Flexbox courants : barre de navigation (logo + marge automatique + liens), section d’accueil (colonne + centrage avec justify), objet média (image fixe + corps en flex:1 avec min-width:0), pied de page en bas (corps en colonne + zone principale en flex:1), grille de cartes (retour à la ligne + flex:1 1 Xpx). Ces cinq modèles couvrent la majorité des besoins réels en matière de mise en page.
Apprends CSS avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 40
- Leçons
- 159
Questions Fréquemment Posées
La leçon « Mises en page Flexbox courantes : navigation, cartes et objets média » est-elle gratuite ?
Oui — le texte complet de « Mises en page Flexbox courantes : navigation, cartes et objets média » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Mises en page Flexbox courantes : navigation, cartes et objets média » ?
Créez des barres de navigation, des grilles de cartes et des objets média pratiques avec flexbox. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Mises en page Flexbox courantes : navigation, cartes et objets média » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Remplacement de l’alignement des éléments flex avec align-self
- Propriété order et réorganisation visuelle
- Notations abrégées flex
- Mises en page Flexbox courantes : navigation, cartes et objets média