8. Autoriser le libellé à rétrécir
Autorise le libellé flex à se contracter et revenir à la ligne sans pousser la barre hors écran.
Objectifs de la leçon
- Autorise le libellé flex à se contracter et revenir à la ligne sans pousser la barre hors écran.
- Appliquer min-width à la cible exacte.
- Conserver toutes les décisions CSS 00 à CSS 02.
Axes
Identifie l'axe principal avant de choisir alignement ou distribution.
Une propriété Flexbox répond à une contrainte observable, pas à une recette à mémoriser.
Contenu variable
Réduis la preview à 375 px puis agrandis-la sans raccourcir le libellé.
Le retour à la ligne doit conserver chaque contrôle visible et utilisable.
Ordre accessible
Compare l'ordre du DOM, l'ordre visuel et la navigation au clavier.
Réserve order aux informations non interactives lorsque le sens de lecture pourrait diverger.
Vocabulaire lié
- min-width — Propriété travaillée avec la valeur 0.
- axe principal — Direction dans laquelle les éléments flex sont distribués.
- axe transversal — Axe perpendiculaire à l'axe principal.
Validation
- Je nomme l'axe concerné.
- Je conserve les règles cumulatives.
- Je vérifie mobile, desktop et clavier.