Vos choix de confidentialité

Le stockage essentiel permet la connexion et le fonctionnement des outils d’apprentissage. Google Analytics mesure les visites ; Microsoft Clarity enregistre les interactions pour améliorer l’ergonomie. Ces deux services sont facultatifs et restent désactivés tant que vous n’avez pas fait votre choix. Lire notre politique de confidentialité.

CSS — Flexbox : axes, alignement et retour à la ligne | SovranCode

Contenu du coursFlexbox · 16 leçons

CSS Foundations

CSS — Introduction CSS — Sélecteurs CSS — Cascade et spécificité CSS — Unités

Layout Systems

CSS — Modèle de boîte CSS — Positionnement CSS — Flexbox CSS — Grid

Applied CSS Systems

CSS — Arrière-plans CSS — Pseudo-classes CSS — Débordements CSS — Transformations CSS — Architecture

Responsive and Responsible CSS

CSS — Media queries CSS — Typographie CSS — Accessibilité

CSS60 min

Flexbox

Build one-dimensional layouts with deliberate wrapping, alignment, and flexible sizing.

Flexbox répartit les éléments sur un axe principal et les aligne sur un axe transversal. Il convient aux dispositions guidées par une direction : navigation, groupe de boutons, bloc associant image et texte ou pied de carte. Autorisez le retour à la ligne lorsque l’espace ne suffit plus.

Comprendre les axes et la répartition de l’espace

Repérez le conteneur flex, le retour à la ligne, l’alignement et gap. Regardez ensuite comment la marge automatique sépare l’action principale du reste du groupe, avant de modifier le code.

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}
.actions__primary { margin-inline-start: auto; }
.actions > * { flex: 0 1 auto; }

Les bons réflexes

Repérez l’axe principal et l’axe transversal avant de choisir un alignement.
Utilisez gap pour espacer les éléments d’un même conteneur plutôt que de multiplier leurs marges.
Testez des libellés longs et le zoom avant d’interdire le retour à la ligne.

L’erreur à éviter

justify-content agit sur l’axe principal et align-items sur l’axe transversal. Quand flex-direction change, ces axes changent aussi : raisonnez à partir des axes actuels, pas seulement de la gauche, de la droite ou du haut.

ATELIER CSS · ENVIRON 30 MIN

Créer une barre d’actions qui s’adapte à la largeur

Comprenez l’exemple, prévoyez le résultat, puis modifiez le code. Poursuivez avec une correction, un exercice en autonomie et deux questions pour faire le point.

Repérer les axes avant de régler l’alignement

Flexbox dispose les enfants directs selon un axe principal, choisi par flex-direction. justify-content répartit l’espace libre sur cet axe ; align-items règle l’alignement sur l’axe transversal. Une rangée ne va pas forcément de gauche à droite : le sens d’écriture compte aussi. Autorisez le retour à la ligne quand les libellés ne tiennent plus et gardez à l’esprit que chaque ligne répartit son propre espace. Si les lignes et les colonnes doivent rester alignées dans une même structure à deux dimensions, envisagez Grid plutôt que de forcer plusieurs lignes flex indépendantes à coïncider.

Le rétrécissement dépend aussi de l’élément

flex-grow répartit l’espace disponible en plus ; flex-shrink contribue à absorber le manque de place, en tenant compte de la taille de base flex-basis. La taille minimale automatique peut empêcher un élément de devenir plus étroit que ce qu’impose son contenu. Pour une zone de texte qui doit rétrécir et revenir à la ligne, min-width: 0 peut être nécessaire en complément d’une règle de coupure adaptée. Les marges auto absorbent l’espace disponible avant justify-content : margin-inline-start: auto permet ainsi de séparer une action ou un groupe. N’utilisez pas order pour créer un ordre visuel qui contredit l’ordre de lecture ou de navigation au clavier.

Laisser un texte long rétrécir et revenir à la ligne

Prévoyez la différence, puis comparez les deux aperçus. Ils utilisent exactement le même HTML.

Avant correction

.row { display:flex; width:240px; gap:8px; } .text { flex:1; }

Après correction

.row { display:flex; width:240px; gap:8px; } .text { flex:1; min-width:0; overflow-wrap:anywhere; }

Avant : la taille minimale automatique conserve la largeur imposée par le long libellé sans espaces. Après : min-width:0 autorise le rétrécissement et overflow-wrap:anywhere permet la coupure du texte. Les deux règles participent à la correction.

Examiner le HTML commun

<div class="row"><span class="tile">CSS</span><p class="text">unlibellétrèslongsansespacesquinepeutpastenirdansunebarredoutilsétroite</p></div>

Essayez la correction dans l’éditeur ci-dessous, puis testez une largeur réduite et un contenu plus long.

Réduisez l’aperçu jusqu’au retour à la ligne des actions. Passez flex-direction à column et expliquez sur quel axe justify-content agit désormais.

Votre espace de pratique CSS

Modifiez les règles dans style. Avec un compte, votre travail est synchronisé ; sans compte, il reste sur cet appareil.

Code

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
body { font: 1rem/1.6 system-ui; padding: 1rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: 1rem; background: #edf2f7; }
.actions a { padding: .75rem; color: #173c88; }
.actions .primary { margin-inline-start: auto; background: #173c88; color: white; }
</style>
</head>
<body>
<nav class="actions" aria-label="Actions de la leçon"><a href="#overview">Présentation</a><a href="#notes">Notes et exemples</a><a class="primary" href="#continue">Poursuivre la leçon</a></nav><p id="overview">Présentation de la leçon</p><p id="notes">Vos notes</p><p id="continue">Prochaine étape</p>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
body { font: 1rem/1.6 system-ui; padding: 1rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: 1rem; background: #edf2f7; }
.actions a { padding: .75rem; color: #173c88; }
.actions .primary { margin-inline-start: auto; background: #173c88; color: white; }
</style>
</head>
<body>
<nav class="actions" aria-label="Actions de la leçon"><a href="#overview">Présentation</a><a href="#notes">Notes et exemples</a><a class="primary" href="#continue">Poursuivre la leçon</a></nav><p id="overview">Présentation de la leçon</p><p id="notes">Vos notes</p><p id="continue">Prochaine étape</p>
</body>
</html>

Résultat

Modifiez votre HTML ou votre CSS et comparez le résultat. L’aperçu s’actualise après une courte pause. Les scripts, l’envoi de formulaires et les ressources externes sont bloqués. Les aperçus larges défilent à l’intérieur du panneau. Exécuter le code ne le note pas et ne l’enregistre pas : utilisez les commandes prévues pour cela.

Ouvrir l’aperçu

Chargement du travail enregistré…

Modifiez le CSS dans style et observez l’aperçu. Votre travail s’enregistre automatiquement ; vous pouvez aussi en télécharger une copie.

DU CODE À CORRIGER

Comprendre l’erreur

Expliquez le problème et proposez votre correction avant de consulter la solution.

.row { display: flex; }
.description { flex: 1; white-space: nowrap; }

Voir la correction et son explication

.row { display: flex; }
.description { flex: 1; min-width: 0; overflow-wrap: anywhere; }

Autorisez l’élément de texte à rétrécir et à revenir à la ligne plutôt que d’imposer une ligne unique. Testez avec un mot long, pas seulement avec de courts libellés de démonstration.

À VOUS DE JOUER

Créer sans recopier l’exemple

Créez une barre d’outils avec des liens de navigation et une action principale. Gardez un ordre HTML cohérent et vérifiez les libellés courts comme les libellés longs.

Code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Créer une barre d’actions qui s’adapte à la largeur — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Créer une barre d’actions qui s’adapte à la largeur</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Créer une barre d’actions qui s’adapte à la largeur — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Créer une barre d’actions qui s’adapte à la largeur</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

Résultat

Les points à vérifier

La barre d’outils revient à la ligne sans couper les actions lorsque la largeur diminue.Vous savez repérer les axes principal et transversal avec row comme avec column.L’ordre de navigation au clavier correspond à l’ordre de lecture visuel.

Qu’avez-vous testé et modifié ?

Chargement du travail enregistré…

Cet exercice s’enregistre séparément de l’exemple guidé. Les cases vous aident à relire votre travail ; elles ne donnent pas une note automatique.

Faire le point sur la leçon

Répondez correctement aux deux questions pour valider ce quiz. Les résultats liés à un compte sont recalculés par le serveur. Ce quiz aide à apprendre ; il ne délivre pas de certification.

1. Avec flex-direction: column et un mode d’écriture horizontal, sur quel axe justify-content agit-il ?L’axe horizontalL’axe verticalLes deux axes de la même façon

2. Un élément flex contenant du texte refuse de rétrécir. Quelle taille minimale faut-il souvent ajuster ?min-width: 0z-index: 999opacity: 0

Chargement du travail enregistré…

Vos choix de confidentialité

CSS Foundations

Layout Systems

Applied CSS Systems

Responsive and Responsible CSS

Flexbox

Comprendre les axes et la répartition de l’espace

Les bons réflexes

L’erreur à éviter

Mise en pratique guidée

Faire le point

Créer une barre d’actions qui s’adapte à la largeur

Repérer les axes avant de régler l’alignement

Le rétrécissement dépend aussi de l’élément

Laisser un texte long rétrécir et revenir à la ligne

Votre espace de pratique CSS

Code

Résultat

Comprendre l’erreur

Créer sans recopier l’exemple

Code

Résultat

Les points à vérifier

Faire le point sur la leçon

Testez ce que vous avez appris

Testez ce que vous avez appris

Testez ce que vous avez appris