Chargement...

Éléments Flex CSS

Flex Container pilote le parent. Les éléments flex répondent à une autre question : comment chaque enfant grandit, rétrécit et démarre sa taille dans cette rangée ou colonne ? Maîtrisez basis, grow et shrink avant de courir après les motifs flex responsives.

Une boîte à outils des éléments flex

📊 Éléments flex en un coup d’œil

Propriété Rôle au quotidien
flex-basis Taille principale de départ avant répartition de l’espace libre
flex-grow Combien d’espace restant cet élément réclame (facteur sans unité)
flex-shrink Avec quelle volonté cet élément rétrécit quand l’espace manque
flex Raccourci pour grow, shrink et basis
align-self Remplace le align-items du conteneur pour un seul élément
order Change l’ordre visuel (à utiliser avec parcimonie — gardez DOM et accessibilité sains)

Voyez basis comme la longueur de départ préférée de l’élément sur l’axe principal. Grow et shrink négocient ensuite l’espace libre ou manquant qui reste.

flex-grow — prendre l’espace restant

Un facteur de 1 laisse un élément s’étendre dans l’espace libre. Les facteurs frères rivalisent : deux éléments avec flex-grow: 1 partagent le reste à parts égales.

Growing main column

css 
.layout {
display: flex;
gap: 1rem;
}

.layout__main {
flex-grow: 1;
}

.layout__aside {
flex-grow: 0;
width: 14rem;
}

flex-basis — partir d’une taille

flex-basis fixe la taille principale de départ avant le calcul grow/shrink. Préférez basis pour l’algorithme flex ; width/height comptent encore, mais basis est le point de départ natif de flex.

Sidebar with basis

css 
.layout__aside {
flex-basis: 14rem;
flex-grow: 0;
flex-shrink: 0;
}

flex-shrink — rendre de l’espace

Quand la rangée est trop serrée, les facteurs shrink décident qui se comprime. flex-shrink: 0 protège les icônes ou rails fixes d’être écrasés.

Protect from squash

css 
.icon-rail {
flex-shrink: 0;
flex-basis: 3rem;
}

Le raccourci flex

flex: grow shrink basis regroupe le trio. Defaults calmes courants : flex: 1 (grandir, autoriser le rétrécissement, basis auto) pour un enfant qui remplit ; flex: 0 0 auto pour une puce rigide.

Flex shorthand

css 
.card__body {
flex: 1 1 auto;
}

.card__badge {
flex: 0 0 auto;
}

align-self — un élément, un autre alignement transversal

Remplacez le align-items du conteneur pour un seul enfant. Utile quand un badge doit coller au début tandis que les frères restent centrés.

Align-self override

css 
.row {
display: flex;
align-items: center;
gap: 0.75rem;
}

.row .note {
align-self: flex-start;
}

Une habitude calme d’élément flex

Basis d’abord pour la taille voulue, puis les facteurs grow/shrink, puis le raccourci pour ranger. Utilisez align-self avec parcimonie. Évitez les tours de order qui brouillent le parcours clavier et lecteur d’écran — et laissez les motifs flex avec media queries pour Flex Responsive.

Named item roles

css 
.cluster__main {
flex: 1 1 auto;
}

.cluster__meta {
flex: 0 0 auto;
align-self: center;
}

À vous de jouer

  1. Créez une rangée main + aside ; donnez à main flex-grow: 1.
  2. Réglez l’aside avec flex-basis: 14rem et flex-shrink: 0.
  3. Protégez une icône avec flex-shrink: 0.
  4. Réécrivez grow/shrink/basis avec le raccourci flex.
  5. Remplacez l’alignement transversal d’un enfant avec align-self.

Erreurs fréquentes

  • Mettre flex-grow sur le conteneur plutôt que sur un élément
  • Confondre width et flex-basis puis s’étonner que le calcul flex diverge
  • Réordonner avec order et casser l’ordre de tabulation/source
  • Laisser les logos s’écraser parce que shrink est resté au défaut
  • Traiter cette leçon comme le module Flex Responsive

Résumé

  • Les éléments flex contrôlent croissance, rétrécissement et basis de départ
  • flex-grow partage l’espace libre ; flex-shrink partage la compression
  • flex-basis est la taille de départ flex sur l’axe principal
  • Le raccourci flex et align-self affinent les enfants un par un
  • Les motifs flex responsives viennent ensuite ; utilisez order avec soin

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
7
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 47 de 51
Css Tutoriel