CSS Academy · Leçon

Display Flex et direction flexible

Activez flexbox sur un conteneur et contrôlez la direction de l’axe principal avec flex-direction.

Display Flex et direction flexible est une leçon CSS 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 CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.

Activation de Flexbox

Flexbox est activé en définissant display: flex sur un élément conteneur (le conteneur flex). Ses enfants directs deviennent automatiquement des éléments flex.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

Flex en ligne

display: inline-flex crée un conteneur flex qui s’insère en ligne (comme inline-block) plutôt que comme un bloc. Le comportement flexbox interne est identique.

<p>Status: <span class="badge">🔥 Trending</span></p>

L’axe principal et l’axe transversal

Flexbox possède deux axes :

Axe principal : direction principale dans laquelle les éléments sont disposés
Axe transversal : axe perpendiculaire à l’axe principal

Toutes les propriétés flex font référence à ces axes, et non à des directions fixes.

flex-direction: row (par défaut)

La direction par défaut est row : les éléments sont placés de gauche à droite le long de l’axe principal horizontal.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

flex-direction: column

flex-direction: column empile les éléments verticalement. L’axe principal devient vertical et l’axe transversal devient horizontal.

<div class="sidebar">
    <div>Dashboard</div>
    <div>Reports</div>
    <div>Settings</div>
  </div>

flex-direction: row-reverse

row-reverse inverse la direction horizontale : les éléments sont placés de droite à gauche. Le début de l’axe principal se trouve à droite.

<nav class="rtl-nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

flex-direction: column-reverse

column-reverse empile les éléments du bas vers le haut. Le dernier élément apparaît en haut.

<div class="chat-list">
    <div>Hey there!</div>
    <div>How are you?</div>
    <div>Doing great, thanks!</div>
  </div>

flex-direction affecte toutes les propriétés flex

Lorsque vous modifiez flex-direction, justify-content change également de direction. Si la direction est column, justify-content aligne les éléments le long de l’axe vertical, et non horizontal.

Mise en page horizontale simple

Le cas d’utilisation Flexbox le plus simple : centrer les éléments d’une navigation :

<nav class="nav">
    <div>Logo</div>
    <a href="#">Home</a>
    <a href="#">Pricing</a>
    <a href="#">Contact</a>
  </nav>

Mise en page verticale simple

Centrer verticalement et horizontalement le contenu d’une carte :

<div class="card">
    <h3>Welcome</h3>
    <p>Centered content</p>
  </div>

Notation abrégée flex-flow

flex-flow est une notation abrégée pour flex-direction et flex-wrap :

<div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

Vérification rapide

Lorsque flex-direction: column est défini, quel axe justify-content contrôle-t-il ?

Récapitulatif

Définissez display: flex sur un conteneur pour créer un contexte flex pour ses enfants. flex-direction définit la direction de l’axe principal : row (horizontal) ou column (vertical). Toutes les propriétés d’alignement flex sont relatives à ces axes, et non à des directions fixes gauche/droite/haut/bas.

Questions Fréquemment Posées

La leçon « Display Flex et direction flexible » est-elle gratuite ?

Oui — le texte complet de « Display Flex et direction flexible » 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 « Display Flex et direction flexible » ?

Activez flexbox sur un conteneur et contrôlez la direction de l’axe principal avec flex-direction. 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 1 sur 4.

Combien de temps prend la leçon « Display Flex et direction flexible » ?

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

← Retour à CSS Academy