Approfondissement de Flexbox : alignement, retour à la ligne et ordre
Maîtrisez justify-content, align-items, align-self, flex-wrap, flex-grow, flex-shrink, flex-basis et la propriété order.
Approfondissement de Flexbox : alignement, retour à la ligne et ordre est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.
Révision : conteneur et éléments flexibles
Récapitulatif : display: flex sur le conteneur crée des éléments flexibles à partir de ses enfants directs. L’axe principal suit flex-direction. L’axe transversal lui est perpendiculaire.
Valeurs de répartition du contenu en détail
Toutes les valeurs de répartition du contenu pour un conteneur orienté en ligne : flex-start (par défaut), flex-end, center, space-between (espaces uniquement entre les éléments), space-around (marge identique autour de chaque élément), space-evenly (espaces identiques partout).
.row { display: flex; }
.space-between { justify-content: space-between; }
.space-around { justify-content: space-around; }
.space-evenly { justify-content: space-evenly; }
.center { justify-content: center; }Alignement des éléments et du contenu
align-items aligne les éléments sur une seule ligne. align-content aligne plusieurs lignes (cela ne fonctionne que lorsque le renvoi à la ligne est activé et qu’il y a plusieurs lignes).
.single-line { display: flex; align-items: center; }
.multi-line {
display: flex;
flex-wrap: wrap;
align-content: space-between; /* space between rows */
}Alignement individuel des éléments
align-self remplace align-items pour un élément flexible précis. Cette propriété est utile pour faire s’étirer un élément tandis que les autres restent centrés.
.container { display: flex; align-items: center; height: 200px; }
.card { background: #e2e8f0; padding: 16px; }
.card.stretch { align-self: stretch; } /* overrides center */Renvoi à la ligne et renvoi inversé
flex-wrap: wrap permet aux éléments de passer sur de nouvelles lignes. wrap-reverse effectue le renvoi dans la direction opposée. Combinez cette propriété avec gap pour créer simplement des grilles adaptatives.
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card-grid > * {
flex: 1 1 280px; /* grow, shrink, min-width */
max-width: 400px;
}Croissance, réduction et base des éléments flexibles
Il s’agit du raccourci en trois parties qui s’applique aux éléments flexibles. flex-grow indique la part d’espace disponible. flex-shrink indique le taux de réduction lorsque l’espace est limité. flex-basis indique la taille initiale avant la croissance ou la réduction.
.sidebar { flex: 0 0 250px; } /* don't grow, don't shrink, 250px */
.main { flex: 1 1 0%; } /* grow to fill, shrink, no base */
.fixed { flex: 0 0 100px; } /* fixed 100px */Raccourcis courants pour les éléments flexibles
flex: 1 = 1 1 0%. flex: auto = 1 1 auto. flex: none = 0 0 auto. flex: 2 = 2 1 0% (occupe deux fois plus d’espace que flex: 1).
Propriété d’ordre
order modifie l’ordre visuel des éléments flexibles sans modifier le HTML. La valeur par défaut est 0. Les valeurs négatives apparaissent avant 0. Utilisez cette propriété avec précaution : les différences entre l’ordre visuel et l’ordre du DOM peuvent désorienter les utilisateurs du clavier et les utilisateurs de lecteurs d’écran.
.sidebar { order: -1; } /* appears first visually regardless of DOM order */
.main { order: 0; } /* default */Largeur minimale nulle pour corriger les débordements
Les éléments flexibles ont implicitement une min-width: auto, ce qui signifie qu’ils ne rétrécissent pas en dessous de la taille de leur contenu. Définissez min-width: 0 pour leur permettre de rétrécir davantage : c’est essentiel pour tronquer du texte dans des éléments flexibles.
.flex-item {
min-width: 0; /* allows shrinking below content size */
}
.flex-item span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Espacements des éléments flexibles sans propriété d’espacement
Dans les environnements anciens qui ne prennent pas en charge les espacements, utilisez des marges sur les éléments et une marge négative sur le conteneur pour créer des gouttières. Aujourd’hui, gap est pris en charge par tous les navigateurs modernes : préférez cette solution.
Conteneurs flexibles imbriqués
Tout élément flexible peut lui-même être un conteneur flexible. Imbriquez des mises en page flexibles pour les dispositions complexes : une rangée de cartes dont le contenu interne est également organisé de manière flexible. Il s’agit du modèle habituel dans les mises en page modernes.
.card {
display: flex;
flex-direction: column;
}
.card-body {
flex: 1; /* push footer to the bottom */
}
.card-footer {
margin-top: auto; /* or use flex: 0 on footer */
}Vérification rapide
Quelle propriété répartit l’espace entre les éléments flexibles sur l’axe transversal lorsque le renvoi à la ligne est activé ?
Récapitulatif : approfondissement de la mise en page flexible
Utilisez la répartition du contenu pour distribuer les éléments sur l’axe principal. Utilisez l’alignement des éléments pour l’axe transversal sur une seule ligne. Utilisez l’alignement du contenu pour l’axe transversal sur plusieurs lignes. Utilisez l’alignement individuel pour un élément. Le renvoi à la ligne permet d’obtenir plusieurs lignes. Le raccourci flexible contrôle la croissance, la réduction et la base. L’ordre modifie l’ordre visuel. Une largeur minimale nulle empêche les problèmes de réduction.
Questions Fréquemment Posées
La leçon « Approfondissement de Flexbox : alignement, retour à la ligne et ordre » est-elle gratuite ?
Oui — le texte complet de « Approfondissement de Flexbox : alignement, retour à la ligne et ordre » 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 « Approfondissement de Flexbox : alignement, retour à la ligne et ordre » ?
Maîtrisez justify-content, align-items, align-self, flex-wrap, flex-grow, flex-shrink, flex-basis et la propriété order. 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 1 sur 4.
Combien de temps prend la leçon « Approfondissement de Flexbox : alignement, retour à la ligne et ordre » ?
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
- Approfondissement de Flexbox : alignement, retour à la ligne et ordre
- CSS Grid : zones de modèle, auto-fit et minmax
- Combiner Flexbox et Grid
- Variables CSS pour les thèmes