Cours CSS / les bases de Flexbox : conteneur, éléments et axes

Flexbox dispose les éléments enfants directs d'un conteneur le long d'un axe principal et distribue l'espace le long de cet axe. flex-direction choisit la direction de l'axe principal, tandis que l’axe transversal est perpendiculaire ; row n'est pas universellement synonyme d'horizontal.

Choisissez un conteneur Flexbox et ses éléments

Flexbox convient aux relations unidimensionnelles telles que les éléments de navigation, un champ de recherche à côté d'un bouton ou une icône à côté d'une description. Espacer ces éléments avec des espaces répétitifs ou des éléments positionnés indépendamment est fragile lorsque le contenu et la largeur disponible changent. Flexbox répartit l'espace disponible d'un conteneur entre ses enfants directs.

Pour aligner simultanément les lignes et les colonnes d’une grille, utilisez CSS Grid. Flexbox peut se répartir sur plusieurs lignes, mais chaque ligne distribue son espace indépendamment : les colonnes ne s’alignent donc pas nécessairement d’une ligne à l’autre. Vous pouvez combiner Grid pour la structure générale d’une page et Flexbox pour un groupe de boutons. Comparez cet usage avec Les bases de CSS Grid : pistes, lignes et placement des éléments.

.menu {
  display: flex;
  gap: 12px;
}

Cette déclaration organise les enfants directs de .menu, sans positionner le conteneur lui-même dans son parent. Si .menu contient deux div et que le premier div contient deux span, seuls les deux div deviennent des éléments flex. Pour disposer aussi les span horizontalement, appliquez display: flex à leur propre div parent.

Identifier les axes principal et transversal

L'axe principal est la direction dans laquelle les éléments Flex sont listés, et l'axe transversal est la direction perpendiculaire à l'axe principal. Plutôt que de mémoriser quelle propriété contrôle la largeur ou la hauteur, vous devez comprendre quel axe la contrôle afin de pouvoir l'aligner avec précision même lorsque vous la changez en colonne.

Les instructions dans ce tableau supposent writing-mode: horizontal-tb et direction: ltr. Dans l'écriture de droite à gauche ou verticale, les directions physiques changent. row suit la direction en ligne, il ne commence donc pas toujours à gauche. Pour plus de détails, voir la documentation MDN sur les concepts de base de Flexbox .

Comprendre le comportement initial de Flexbox

Si une valeur distincte n'est pas spécifiée, la valeur initiale de flex-direction est row et celle de flex-wrap est nowrap. Les éléments sont regroupés au début de l'axe principal et ne s'étendent pas automatiquement le long de l'axe principal pour remplir l'espace supplémentaire. Ils peuvent se réduire s'il y a un espace insuffisant, mais s'ils ne peuvent pas se réduire suffisamment en raison de la taille minimale du contenu ou des contraintes spécifiées, ils peuvent déborder à l'extérieur du parent. Un contrôle détaillé de l'alignement, des retours à la ligne et de la taille des éléments sera poursuivi dans Alignement Flexbox, retour à la ligne, gap, grow et shrink.

Sur l’axe transversal, l'étirement est le comportement d'alignement par défaut. Les éléments avec une hauteur automatique dans une rangée remplissent généralement la même hauteur de rangée. C'est pourquoi les cartes de description courtes apparaissent de la même hauteur que les cartes de description longues. Ne supposez pas que les éléments qui ont déjà une hauteur définie ou des marges automatiques s'étireront automatiquement. En colonne, l’axe transversal est horizontal, donc la largeur semble augmenter.

Le redimensionnement initial d'un élément peut être compris comme flex: 0 1 auto. 0 signifie ne pas agrandir en prenant l'espace restant, 1 signifie participer à la réduction en cas d'espace insuffisant, et auto signifie utiliser la spécification de taille et le contenu de l'axe principal correspondant comme base. À ce stade, la direction de placement et le fonctionnement de base sont d'abord vérifiés, et la pratique de l'ajustement du ratio et des sauts de ligne est détaillée dans la leçon sur l'alignement et l'ajustement des tailles.

Comparer le flux normal et les directions Flexbox

Enregistrez le code ci-dessous en tant que fichier UTF-8 flex-direction.html et ouvrez-le dans votre navigateur. Aucune bibliothèque séparée n'est nécessaire. Tous les liens sont écrits dans l'ordre premier, deuxième, troisième, et seul le CSS est différent. La section de disposition générale spécifie les liens comme des blocs et les affiche ligne par ligne.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>flex-direction.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.demo { border: 2px dashed #789; padding: 12px; margin-bottom: 20px; }
 .demo > a, .nested > div { padding: 12px; background: #dceefa; }
 .normal > a { display: block; margin-bottom: 8px; }
 .row, .column, .reverse, .nested { display: flex; gap: 12px; }
 .column { flex-direction: column; }
 .reverse { flex-direction: row-reverse; }
 .nested > div { flex: 1; min-width: 0; }
 .nested span { display: block; }
 .initial { display: flex; gap: 12px; border: 2px dashed #789; }
 .initial > div { width: 180px; min-width: 0; padding: 12px; background: #e8f5de; }
  </style>
</head>
<body>
<h1>Same HTML order, different placement</h1>
<h2>Normal block flow</h2><div class="demo normal"><a href="#result">First</a>
<a href="#result">Second</a>
<a href="#result">Third</a></div>
<h2>row</h2><div class="demo row"><a href="#result">First</a>
<a href="#result">Second</a>
<a href="#result">Third</a></div>
<h2>column</h2><div class="demo column"><a href="#result">First</a>
<a href="#result">Second</a>
<a href="#result">Third</a></div>
<h2>row-reverse</h2><div class="demo reverse"><a href="#result">First</a>
<a href="#result">Second</a>
<a href="#result">Third</a></div>
<h2>Direct and nested children</h2><div class="demo nested"><div><span>First line of box A</span><span>Second line of box A</span></div><div>Box B</div></div>
<h2>Initial size and growth</h2><div class="initial"><div>Short description</div><div>Two-line description<br>Second line</div><div>Three-line description<br>Second line<br>Third line</div></div>
<p id="result">This is the link destination. Use the links above to check keyboard navigation order.</p>
</body>
</html>

1. Dans la section row, assurez-vous que les trois éléments soient sur la même ligne. Il suffit d'ajouter flex-direction: column à .row pour la transformer en verticale. Après confirmation, supprimez la déclaration et rétablissez la disposition row initiale.
2. Remarquez comment les liens dans la section colonne s'élargissent horizontalement. Ajouter align-items: flex-start à .column rapproche le lien de la largeur du contenu. Cela s'explique par le fait que l'axe transversal de la colonne est horizontal. Après comparaison, supprimez la déclaration ajoutée.
3. Dans la section row-reverse, le lien « First » apparaît à droite, mais reste le premier lien dans le HTML. Appuyez sur la touche Tab pour vous assurer de passer du premier → deuxième → troisième. Ne changez pas les ordres de lecture importants avec seulement reverse, car l'ordre gauche-droite de l'écran et l'ordre de navigation au clavier peuvent changer.
4. Dans les sections enfant imbriquées, seules les grandes boîtes A et B sont placées côte à côte. Les deux spans dans A sont verticaux. Ajoutez display: flex à la règle .nested > div pour modifier également la disposition interne de chaque boîte. Supprimez la déclaration ajoutée après vérification.
5. Dans la dernière section, assurez-vous que les trois cartes ont la même hauteur, et sur les écrans larges, chaque carte ne remplit pas toute la largeur restante. Réduire la largeur de l'écran réduit la largeur des cartes sans sauts de ligne. Si vous ajoutez flex-shrink: 0 au .initial > div, il ne rétrécira pas, ce qui provoquerait un débordement horizontal. Supprimez la déclaration ajoutée après vérification.

Diagnostiquer les résultats de mise en page inattendus

Dans les outils de développement, sélectionnez le parent réel, pas l'enfant que vous voulez disposer, et vérifiez la valeur appliquée de display. Ensuite, vérifiez flex-direction, width·height·min-width et margin de l'enfant. Si display: flex est remplacé par une autre règle ou si les éléments à disposer est un niveau plus bas, vous n'obtiendrez pas les résultats attendus.

Le passage à plusieurs lignes avec flex-wrap est différent d’un changement de direction entre row et column. Dans une situation où une ligne horizontale déborde, vous devez d'abord déterminer si la colonne est appropriée et si flex-wrap est nécessaire pour maintenir plusieurs lignes. Si le contenu est masqué sur mobile, vérifiez la taille minimale réductible et l'ordre de lecture avant de le masquer avec overflow: hidden. Les modifications temporaires dans les outils de développement peuvent être annulées par un rafraîchissement, et si vous avez modifié un fichier, vous devrez restaurer vous-même les valeurs enregistrées.