← Mois 2 — CSS moderne & mise en pageSemaine 232 min

Flexbox en profondeur

Objectifs

Maîtriser : display:flex
Maîtriser : align-items
Maîtriser : gap

Cours

Cette leçon fait partie du parcours annuel Code Academy Alfred. Objectif : comprendre display:flex, align-items, gap en conditions réelles de conception web / web mobile.

Flexbox aligne sur un axe principal. flex-direction, justify-content, align-items, gap couvrent 80% des barres d’outils et cartes.

flex: 1 pour distribuer l’espace. min-width: 0 évite le débordement de texte dans les flex items.

Sur mobile, une colonne (flex-direction: column) + gap remplace beaucoup de marges improvisées.

Mets en pratique immédiatement : recrée l’exemple, puis modifie-le. La mémorisation vient de la répétition active, pas de la lecture passive.

Si tu bloques, utilise Cursor avec un prompt précis (contexte + objectif + contraintes), puis explique toi-même le diff généré.

Atelier pratique

Passe .row en flex avec gap et justify-content.

○ display: flex○ gap○ justify-content

<style>
      .row { display: block; }
      .item { background: #0f7f78; color: white; padding: 12px; }
    </style>
    <div class="row">
      <div class="item">A</div>
      <div class="item">B</div>
      <div class="item">C</div>
    </div>

Évaluation

1. Quel est le sujet principal de « Flexbox en profondeur » ?

Précédente Suivante