Chargement...

Flex responsive CSS

Flex Items a dimensionné chaque enfant. Flex responsive pose la question suivante : quand le viewport rétrécit, cette rangée flex doit-elle s’enrouler, s’empiler ou inverser sa direction ? Apprenez quelques motifs calmes de media query — les modules approfondis Responsive Design et Media Queries viennent plus tard.

Une boîte à outils flex responsive

📊 Flex responsive en un coup d’œil

Outil	Rôle au quotidien
`flex-wrap`	Laisse les items passer à une nouvelle ligne quand la rangée est trop étroite
`flex-direction`	Bascule `row` ↔ `column` à un breakpoint pour empiler les sections
Media query	Applique une nouvelle règle flex seulement quand le viewport correspond
`flex-basis` / `min-width`	Indique quand les cartes s’enroulent ou restent côte à côte
`gap`	Garde l’espacement honnête quand les lignes s’enroulent
Éviter `order` pour la mise en page	Conservez l’ordre du DOM pour le clavier et les lecteurs d’écran

Partez d’une base flex lisible (bureau ou mobile-first). À un breakpoint clair, ne changez que ce qui doit changer — wrap, direction ou basis — pas toutes les propriétés d’un coup.

flex-wrap — laissez la rangée respirer

Quand les cartes doivent rester en rangée sur grand écran et s’enrouler au lieu d’être écrasées sans fin, activez le wrap et donnez à chaque carte un basis raisonnable.

Wrapping card row

css

.cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}

.cards__item {
flex: 1 1 14rem;
min-width: 12rem;
}

Inversion de direction à un breakpoint

Motif classique : côte à côte sur viewports larges, colonne empilée sur les étroits. Changez flex-direction dans une media query — gardez le même HTML.

Stack on small screens

css

.shell {
display: flex;
flex-direction: row;
gap: 1.25rem;
}

@media (max-width: 40rem) {
.shell {
flex-direction: column;
}
}

Basis et min-width pour le reflow

Associez le wrap à flex-basis ou min-width pour que les items décident quand tomber. Un breakpoint peut aussi réinitialiser le basis si une taille ne s’enroule jamais proprement.

Basis at a breakpoint

css

.toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}

.toolbar__action {
flex: 1 1 10rem;
}

@media (max-width: 36rem) {
.toolbar__action {
flex-basis: 100%;
}
}

Les viewports étroits ne sont pas un autre langage de mise en page — les mêmes outils flex, d’autres valeurs. Changez la direction ou le wrap ; n’inventez pas un second arbre HTML.

Une habitude flex responsive calme

D’abord un breakpoint principal. Préférez wrap et inversions de direction aux remaniements par order. Gardez l’ordre source sensé. Laissez les images fluides, les systèmes complexes de breakpoints et la théorie Responsive complète pour plus tard.

Named stack roles

css

.page {
display: flex;
flex-direction: row;
gap: 1.5rem;
}

.page__main {
flex: 1 1 auto;
min-width: 0;
}

.page__rail {
flex: 0 0 16rem;
}

@media (max-width: 48rem) {
.page {
flex-direction: column;
}

.page__rail {
flex-basis: auto;
width: auto;
}
}

Min-width wrap guard

css

.chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

.chips__item {
flex: 0 1 auto;
min-width: 7rem;
}

À vous de jouer

Construisez une rangée de cartes avec flex-wrap: wrap et flex: 1 1 14rem.
Passez une coque en flex-direction: column sous max-width: 40rem.
Forcez les actions de barre d’outils à flex-basis: 100% sur un petit breakpoint.
Ajoutez min-width pour que les chips s’enroulent au lieu d’être écrasés.
Résistez à utiliser order pour « réparer » la mise en page responsive.

Erreurs fréquentes

Ne faire que rétrécir les items sans fin au lieu d’enrouler ou d’empiler
Utiliser order comme outil de layout responsive et casser l’ordre de tabulation
Oublier flex-wrap puis se demander pourquoi les cartes ne tombent jamais
Tout jeter dans une énorme media query
Prendre cette leçon pour tout le cours Responsive Design

Résumé

Le flex responsive adapte wrap, direction et basis selon les largeurs
flex-wrap plus un basis/min-width raisonnable laisse les rangées se réorganiser
Les media queries inversent flex-direction pour empiler sur écrans étroits
Préférez des breakpoints calmes ; évitez order pour les tours de layout
Les modules Responsive et Media Queries plus approfondis viennent ensuite

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓

Questions

🎯

70%

Pour Réussir

♾️

∞

Temps

🔄

∞

Tentatives

📝 Instructions

Lisez chaque question attentivement
Sélectionnez la meilleure réponse pour chaque question
Vous pouvez refaire le quiz autant de fois que vous le souhaitez
Votre progression sera affichée en haut

Langue