CSS Academy · Leçon

Notations abrégées flex

Maîtrisez la notation abrégée flex et comprenez les valeurs courantes comme flex: 1, flex: none et flex: auto.

Notations abrégées flex 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.

Retour sur la notation abrégée flex

La notation abrégée flex définit flex-grow, flex-shrink et flex-basis dans une seule déclaration. Comprendre ses variantes est essentiel pour créer des mises en page adaptées aux situations réelles.

flex: 1

flex: 1 est équivalent à flex: 1 1 0%. Les éléments commencent avec une base nulle, puis grandissent de manière égale pour remplir l’espace disponible. Il s’agit de la notation abrégée la plus courante pour créer des colonnes de largeur égale.

<div class="equal-cols">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

flex: auto

flex: auto = flex: 1 1 auto. Les éléments commencent avec la taille naturelle de leur contenu, puis grandissent ou rétrécissent proportionnellement. Lorsqu’ils grandissent, les contenus plus larges obtiennent davantage d’espace.

<div class="nav-links">
  <a href="#">Home</a>
  <a href="#">About Us</a>
  <a href="#">Contact</a>
</div>

flex: none

flex: none = flex: 0 0 auto. L’élément est rigide : il ne grandit pas et ne rétrécit pas. Sa taille est déterminée par la largeur naturelle de son contenu ou par une largeur/hauteur explicite.

<div class="row">
  <div class="logo">Logo</div>
  <div>Flexible content</div>
</div>

flex: 0 0 Xpx

Un élément de taille fixe et non flexible. C’est la manière la plus explicite de créer des panneaux latéraux de largeur précise :

<div class="layout">
  <div class="sidebar-left">Left</div>
  <div class="main-content">Main</div>
  <div class="sidebar-right">Right</div>
</div>

flex: 1 vs flex: 1 1 auto

Différence essentielle : avec flex: 1 (base de 0 %), tous les éléments commencent à 0 et grandissent proportionnellement. Avec flex: 1 1 auto, ils commencent avec la taille naturelle de leur contenu, puis grandissent. Cela modifie la répartition de l’espace restant.

Rapport flex: 2

Utilisez des valeurs inégales de flex-grow pour créer des répartitions proportionnelles :

<div class="split">
  <div class="main">Main (2/3)</div>
  <div class="side">Side (1/3)</div>
</div>

Combiner des éléments fixes et flexibles

Le modèle le plus courant dans les projets réels : une barre latérale fixe et un contenu principal flexible :

<div class="layout">
  <div class="sidebar">Sidebar 280px</div>
  <div class="content">Flexible content</div>
</div>

Astuce flex avec min-width: 0

Les éléments flex possèdent par défaut min-width: auto. Cela peut les empêcher de rétrécir en dessous de la taille de leur contenu. Définissez min-width: 0 sur les éléments qui doivent pouvoir rétrécir librement, comme les conteneurs de texte avec troncature.

<div class="row">
  <div class="text-col">This is a very long line of text that needs to truncate with an ellipsis inside a flex item.</div>
</div>

Modèle de grille de cartes

Une grille de cartes réactive avec des cartes flexibles, mais soumises à des limites :

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

Déboguer la notation abrégée flex

Utilisez les DevTools du navigateur pour examiner les valeurs calculées de flex-grow, flex-shrink et flex-basis. La superposition d’inspection Flexbox affiche également visuellement l’espace libre et la taille des éléments.

Vérification rapide

À quoi se développe flex: auto ?

Récapitulatif

Mémorisez les principales notations abrégées flex : flex: 1 (colonnes égales à partir de zéro), flex: auto (croissance à partir de la taille naturelle), flex: none (élément rigide), flex: 0 0 Xpx (taille fixe). Utilisez min-width: 0 sur les enfants flex qui contiennent du texte avec troncature. Combinez des éléments fixes et flexibles pour créer des mises en page classiques avec barre latérale.

Questions Fréquemment Posées

La leçon « Notations abrégées flex » est-elle gratuite ?

Oui — le texte complet de « Notations abrégées flex » 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 « Notations abrégées flex » ?

Maîtrisez la notation abrégée flex et comprenez les valeurs courantes comme flex: 1, flex: none et flex: auto. 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 « Notations abrégées flex » ?

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