Flexbox pour la mise en page
Utilisez Flexbox pour aligner les éléments en ligne ou en colonne, répartir l’espace et faire passer le contenu à la ligne sans astuces avec float.
Flexbox pour la mise en page est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 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 Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que Flexbox ?
Flexbox (mise en page flexible) est un modèle de mise en page CSS conçu pour les mises en page unidimensionnelles : il répartit l'espace le long d'une seule ligne ou colonne. Il résout élégamment des problèmes que les mises en page fondées sur des flottants ne pouvaient pas gérer.
Activer Flexbox
Appliquez display: flex au container. Ses enfants directs deviennent automatiquement des éléments flexibles. Les enfants de ces éléments ne sont pas concernés.
.container {
display: flex;
}
/* All direct children are now flex items */flex-direction
Définit l'axe principal. row (par défaut) : éléments disposés de gauche à droite. row-reverse : de droite à gauche. column : de haut en bas. column-reverse : de bas en haut.
.stack { display: flex; flex-direction: column; }
.row { display: flex; flex-direction: row; }justify-content — alignement sur l'axe principal
Répartit l'espace le long de l'axe principal. flex-start (par défaut), flex-end, center, space-between, space-around, space-evenly.
.nav {
display: flex;
justify-content: space-between; /* logo left, links right */
}
.centered {
display: flex;
justify-content: center; /* items in the middle */
}align-items — alignement sur l'axe transversal
Aligne les éléments sur l'axe transversal (perpendiculaire à l'axe principal). stretch (par défaut), center, flex-start, flex-end, baseline.
.card {
display: flex;
align-items: center; /* vertically center content */
}Propriété gap
gap: row-gap column-gap ajoute un espace entre les éléments flexibles sans utiliser de marge. C'est bien plus propre que l'astuce des marges. Cette propriété est largement prise en charge par les navigateurs modernes.
.grid {
display: flex;
flex-wrap: wrap;
gap: 24px; /* 24px in all directions between items */
gap: 16px 24px; /* row-gap column-gap */
}flex-wrap
Par défaut, les éléments flexibles se resserrent sur une seule ligne. flex-wrap: wrap leur permet de passer sur de nouvelles lignes lorsqu'ils ne tiennent pas. Combinez cette propriété avec gap pour créer une grille adaptative simple.
.cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1 1 280px; /* grow, shrink, min-width */
}La notation abrégée flex sur les éléments
flex: grow shrink basis sur les éléments flexibles. flex: 1 est une notation abrégée pour 1 1 0% : les éléments grandissent de manière égale et ignorent la taille de leur contenu. flex: 0 0 200px crée un élément fixe de 200 px.
.sidebar { flex: 0 0 240px; } /* fixed width */
.main { flex: 1; } /* takes remaining space */align-self
align-self sur un élément flexible remplace la valeur align-items du container pour cet élément uniquement. Pratique pour aligner un élément différemment de ses éléments frères.
.container { display: flex; align-items: center; }
.tall-item { align-self: flex-start; }Propriété order
order contrôle l'ordre visuel des éléments flexibles sans modifier l'ordre HTML. La valeur par défaut est 0. Les valeurs les plus faibles apparaissent en premier. Utilisez cette propriété avec parcimonie : elle crée un décalage entre l'ordre visuel et l'ordre du DOM ou de lecture.
Centrer avec Flexbox
La manière la plus simple de centrer un élément horizontalement et verticalement : définissez le parent avec display: flex; justify-content: center; align-items: center.
.overlay {
position: fixed;
inset: 0; /* shorthand for top/right/bottom/left: 0 */
display: flex;
justify-content: center;
align-items: center;
background: rgba(0,0,0,0.5);
}Vérification rapide
Quelle propriété Flexbox répartit l'espace entre les éléments le long de l'axe principal ?
Récapitulatif : notions fondamentales de Flexbox
display: flex sur le container. flex-direction: row ou column pour définir l'axe. justify-content pour l'espacement sur l'axe principal. align-items pour l'axe transversal. gap pour les espaces entre éléments. flex-wrap pour les lignes multiples. La notation abrégée flex sur les éléments pour leur croissance. Un système de mise en page unidimensionnel polyvalent.
Questions Fréquemment Posées
La leçon « Flexbox pour la mise en page » est-elle gratuite ?
Oui — le texte complet de « Flexbox pour la mise en page » 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 Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Flexbox pour la mise en page » ?
Utilisez Flexbox pour aligner les éléments en ligne ou en colonne, répartir l’espace et faire passer le contenu à la ligne sans astuces avec float. Tu pratiques Frontend 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 Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend 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 2 sur 4.
Combien de temps prend la leçon « Flexbox pour la mise en page » ?
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 Frontend Academy ?
Oui. Chaque leçon Frontend 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
- La balise meta viewport
- Flexbox pour la mise en page
- CSS Grid pour la mise en page
- Requêtes média et développement mobile d’abord