CSS Academy · Leçon

Flex Wrap et Align-Content

Autorisez les éléments flexibles à passer sur plusieurs lignes et alignez ces lignes avec align-content.

Flex Wrap et Align-Content est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.

flex-wrap: nowrap (par défaut)

Par défaut, les éléments flex ne reviennent pas à la ligne. Si les éléments dépassent la largeur du conteneur, ils rétrécissent ou débordent au lieu de passer à une nouvelle ligne.

flex-wrap: wrap

Avec flex-wrap: wrap, les éléments qui débordent sur l’axe principal passent à une nouvelle ligne (ou colonne, dans la direction column). Chaque ligne créée agit comme un mini conteneur flex distinct.

<div class="card-grid">
    <div>Card 1</div>
    <div>Card 2</div>
    <div>Card 3</div>
    <div>Card 4</div>
    <div>Card 5</div>
  </div>

flex-wrap: wrap-reverse

wrap-reverse fait passer les éléments dans la direction transversale opposée : les nouvelles lignes apparaissent au-dessus (dans la direction row) plutôt qu’en dessous.

Motif de cartes avec retour à la ligne

Une mise en page classique de cartes adaptative, où les cartes passent à la ligne suivante lorsque la fenêtre d’affichage rétrécit :

<div class="cards">
    <div class="card">Card A</div>
    <div class="card">Card B</div>
    <div class="card">Card C</div>
  </div>

align-content pour plusieurs lignes

align-content contrôle l’espacement entre les lignes créées sur l’axe transversal. Cette propriété n’a aucun effet lorsqu’il n’y a qu’une seule ligne. Ses valeurs correspondent à celles de justify-content.

Valeurs de align-content

Valeurs disponibles :

flex-start — regroupe les lignes vers le début transversal
flex-end — regroupe les lignes vers la fin transversale
center — centre les lignes
space-between — espace égal entre les lignes
space-around — espace égal autour des lignes
stretch — les lignes s’étirent pour remplir l’espace (par défaut)

<div class="gallery">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>

align-items et align-content

Différence :

align-items — aligne les éléments à l’intérieur de chaque ligne flex
align-content — aligne les lignes flex elles-mêmes à l’intérieur du conteneur

Espacement dans Flexbox

La propriété gap (auparavant grid-gap) ajoute un espace régulier entre les éléments flex sans utiliser de marges. Elle fonctionne aussi bien pour les espaces entre les lignes que pour ceux entre les colonnes.

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

Retour à la ligne adaptatif sans requêtes média

Effectuez automatiquement un retour à la ligne pour afficher autant de colonnes que possible en utilisant une taille idéale fixe. Aucune requête média n’est nécessaire :

<div class="grid">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
  </div>

Notation abrégée flex-flow

flex-flow combine flex-direction et flex-wrap dans une seule déclaration :

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

Retour à la ligne ou grille

Pour les mises en page bidimensionnelles complexes avec des lignes et des colonnes définies, la grille CSS est plus appropriée. Le retour à la ligne de Flexbox convient mieux au contenu unidimensionnel qui se répartit naturellement sur plusieurs lignes.

Vérification rapide

Quelle propriété aligne les lignes elles-mêmes lorsqu’un conteneur flex comporte plusieurs lignes ?

Récapitulatif

flex-wrap: wrap permet aux éléments de passer à de nouvelles lignes. align-content contrôle l’espacement entre ces lignes dans un conteneur comportant plusieurs lignes. Utilisez gap pour obtenir un espacement régulier. Combinez flex: 1 1 250px avec flex-wrap pour créer des grilles de cartes adaptatives sans requêtes média.

Questions Fréquemment Posées

La leçon « Flex Wrap et Align-Content » est-elle gratuite ?

Oui — le texte complet de « Flex Wrap et Align-Content » 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 « Flex Wrap et Align-Content » ?

Autorisez les éléments flexibles à passer sur plusieurs lignes et alignez ces lignes avec align-content. 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 3 sur 4.

Combien de temps prend la leçon « Flex Wrap et Align-Content » ?

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