Flexbox

Flexbox est la méthode CSS pour contrôler la mise en page -- placer des éléments côte à côte, les centrer ou répartir l'espace entre eux. Le Style Manager vous donne un contrôle total sur cette propriété.

Deux points à retenir tout au long de cette page :

• Le parent définit la mise en page, les enfants s'adaptent. Vous définissez les règles sur le conteneur -- ses enfants directs les suivent.
• Flexbox a deux missions : disposer les éléments en ligne et répartir l'espace autour d'eux.

Note : Silex prend actuellement en charge Flexbox mais pas CSS Grid. Flexbox couvre la grande majorité des besoins de mise en page. Si vous souhaitez voir d'autres options de mise en page, votez pour Tailwind CSS Support sur la feuille de route.

Placer des éléments côte à côte

Par défaut, les éléments s'empilent verticalement. Pour les placer en ligne :

1. Sélectionnez l'élément parent (une Section, un Div -- tout ce qui contient les éléments)
2. Dans le Style Manager, définissez Display sur Flex

Les enfants s'alignent immédiatement horizontalement. C'est le principe fondamental de Flexbox : vous transformez un conteneur en conteneur flex, et ses enfants directs suivent vos règles de mise en page. Seuls les enfants directs sont affectés -- les petits-enfants restent dans leur propre flux.

Essayez maintenant : ouvrez Silex, créez une nouvelle page, ajoutez un Div contenant trois blocs de texte. Sélectionnez le Div, définissez Display sur Flex. Observez les blocs de texte se placer côte à côte.

Choisir une direction

Flex-direction contrôle la direction dans laquelle les enfants s'écoulent.

Row (par défaut) -- de gauche à droite. Utilisez-le pour les barres de navigation, les mises en page en cartes, tout ce qui est horizontal.

Column -- de haut en bas. Cela ressemble à l'empilement par défaut, mais vous pouvez désormais utiliser tous les outils d'alignement flex. Si vous activez Flex et que rien ne semble changer, c'est probablement la raison -- essayez de passer à Row.

Comprendre les deux axes

C'est le concept le plus important à saisir. Chaque conteneur flex possède deux axes :

• L'axe principal suit la direction de Flex-direction. En mode row, c'est horizontal (gauche → droite). En mode column, c'est vertical (haut → bas).
• L'axe transversal est perpendiculaire. En mode row, c'est vertical. En mode column, c'est horizontal.

Pourquoi est-ce important ? Parce que les deux propriétés d'alignement contrôlent chacune un axe différent :

• Justify = axe principal (la direction dans laquelle les éléments s'écoulent)
• Align = axe transversal (l'autre direction)

Centrer et répartir l'espace

Justify-content répartit les éléments le long de l'axe principal :

• flex-start (par défaut) -- éléments groupés au début
• flex-end -- éléments groupés à la fin
• center -- éléments groupés au milieu
• space-between -- premier élément au début, dernier à la fin, espaces égaux entre eux
• space-around / space-evenly -- espace égal autour ou entre tous les éléments
• stretch -- les éléments s'étirent pour remplir la ligne (surtout utile en contexte de grille)

Align-items positionne les éléments le long de l'axe transversal :

• flex-start -- les éléments se collent au bord de départ (haut en mode row)
• flex-end -- les éléments se collent au bord de fin (bas en mode row)
• center -- éléments centrés
• stretch (par défaut) -- les éléments s'étirent pour correspondre au plus grand
• baseline -- les éléments s'alignent sur leur ligne de base textuelle (utile quand les éléments ont des tailles de police différentes)

Pour centrer parfaitement quelque chose : Justify-content center + Align-items center. C'est tout.

Logo à gauche, liens à droite : Justify-content space-between + Align-items center.

Passage à la ligne sur plusieurs lignes

Par défaut, Flex-wrap est nowrap -- tous les enfants se compriment sur une seule ligne, même s'ils rétrécissent. Définissez Flex-wrap sur wrap et ils passeront à la ligne suivante quand ils manqueront de place. Wrap-reverse empile les nouvelles lignes au-dessus.

C'est ainsi que vous construisez une grille de cartes : donnez à chaque carte une largeur fixe, activez le wrap, et les cartes s'écoulent naturellement en lignes -- moins par ligne sur les petits écrans, sans besoin de points de rupture.

Contrôler l'espacement avec les gaps

Column-gap ajoute de l'espace horizontal entre les enfants. Row-gap ajoute de l'espace vertical entre les lignes (quand le wrap est activé). Les deux valent normal (aucun gap) par défaut. Définissez-les sur le conteneur.

Exemple : Column-gap 24px place 24 pixels entre chaque élément -- aucun espace sur les bords extérieurs. Plus propre que margin car il ne double pas et n'affecte pas le premier/dernier élément.

Faire grandir ou rétrécir un élément

Ces propriétés s'appliquent aux enfants individuels -- le Style Manager les affiche lorsque vous sélectionnez un élément à l'intérieur d'un conteneur flex.

Flex-grow indique à un enfant combien d'espace restant prendre. La valeur par défaut est 0 (garder la taille naturelle). Définissez-la à 1 et l'enfant s'agrandit pour remplir tout l'espace restant après que les autres enfants ont pris le leur.

Flex-shrink -- cet enfant peut-il rétrécir quand l'espace est limité ? La valeur par défaut est 1 (oui). Définissez-la à 0 pour l'empêcher.

Flex-basis -- la taille de départ avant que grow/shrink n'interviennent. Similaire à width en mode row ou height en mode column, mais compatible avec flex. Utilisez auto pour la taille du contenu.

Barre latérale + contenu principal : la barre latérale obtient Flex-basis 250px et Flex-grow 0. La zone principale obtient Flex-grow 1. La barre latérale reste à 250px, la zone principale remplit le reste -- et s'adapte quand la fenêtre est redimensionnée.

Surcharger l'alignement pour un élément

Align-self surcharge le Align-items du conteneur pour un enfant spécifique. Il accepte les mêmes valeurs : auto (suivre le conteneur), flex-start, flex-end, center, stretch, baseline.

Une ligne de boutons tous centrés verticalement (Align-items: center), mais vous voulez une petite icône en haut ? Définissez le Align-self de cette icône à flex-start.

Exemple pratique : grille de cartes avec navigation

Barre de navigation :

1. Ajoutez un Div -- c'est le conteneur de navigation
2. À l'intérieur : une Image (logo) et un autre Div (pour les liens)
3. Conteneur de navigation : Display Flex, Justify-content space-between, Align-items center
4. Div des liens : Display Flex, Column-gap 24px

Le logo pousse à gauche, les liens poussent à droite, tout est centré verticalement.

Grille de cartes en dessous :

1. Ajoutez un Div sous la navigation -- c'est le conteneur des cartes
2. Ajoutez 6 éléments Div à l'intérieur -- les cartes
3. Conteneur des cartes : Display Flex, Flex-wrap wrap, Justify-content center, Column-gap 24px, Row-gap 24px
4. Chaque carte : Flex-basis 300px, Flex-grow 1

Sur les grands écrans : 3 cartes par ligne. Plus étroit : 2, puis 1. Espacement cohérent, aucun point de rupture.

Erreurs courantes

• Appliquer flex à l'enfant au lieu du parent. Le parent est le conteneur flex -- c'est lui qui contrôle la mise en page. Seuls les enfants directs sont affectés.
• Confondre Justify-content et Align-items. Souvenez-vous : Justify = axe principal (la direction dans laquelle les éléments s'écoulent), Align = axe transversal (l'autre direction). En mode row, Justify est horizontal et Align est vertical.
• Utiliser margin pour l'espacement au lieu des gaps. Column-gap et Row-gap sont plus simples -- pas de double marges, pas d'espace supplémentaire sur les bords.
• Oublier le wrap pour les mises en page en cartes. Sans lui, les cartes rétrécissent pour tenir sur une seule ligne.
• S'attendre à ce que flex affecte les petits-enfants. Flex ne s'applique qu'aux enfants directs du conteneur. Les éléments imbriqués ont besoin de leur propre conteneur flex.

En savoir plus

• MDN : CSS Flexible Box Layout -- référence complète
• MDN : Les bases de Flexbox -- tutoriel interactif pour débutants
• Tailwind CSS Support -- votez pour des options de mise en page alternatives sur la feuille de route
• Le modèle de boîte -- comprendre le padding, le margin et leur interaction avec les gaps flex
• Positionnement -- quand utiliser le positionnement absolu/fixe au lieu de flex
• Design responsive -- combiner Flex-wrap avec les points de rupture pour des mises en page responsives

---

Avancé : réorganisation, inversion et alignement multi-lignes

Réorganisation visuelle

Order modifie l'endroit où un enfant apparaît visuellement sans changer le HTML. Les nombres les plus bas apparaissent en premier (par défaut 0). Définissez le Order d'une image à -1 pour la faire apparaître en premier visuellement.

Directions inversées

Row-reverse et Column-reverse (valeurs de Flex-direction) inversent l'ordre visuel. Utilisez-les avec prudence -- les lecteurs d'écran suivent toujours l'ordre HTML, donc un décalage peut dérouter les utilisateurs qui naviguent au clavier ou avec une technologie d'assistance.

Aligner plusieurs lignes avec retour à la ligne

Quand Flex-wrap est activé et que les éléments s'étendent sur plusieurs lignes, Align-content contrôle comment ces lignes sont réparties le long de l'axe transversal.

Valeurs : flex-start, flex-end, center, space-between, space-around, stretch.

Cela ne prend effet qu'avec plusieurs lignes. Les conteneurs sur une seule ligne l'ignorent.

Inline flex

Inline flex (dans le menu déroulant Display) fonctionne exactement comme Flex, mais le conteneur lui-même se comporte comme un élément en ligne -- il s'affiche à côté du texte au lieu de prendre toute la largeur. Utile pour un petit groupe d'icônes à l'intérieur d'un paragraphe.

Référence : toutes les propriétés flex

Propriétés du conteneur

Définies sur l'élément parent (Display: Flex ou Inline flex).

Propriété	Valeurs	MDN
Display	flex, inline-flex	lien
Flex-direction	row, row-reverse, column, column-reverse	lien
Flex-wrap	nowrap, wrap, wrap-reverse	lien
Justify-content	flex-start, flex-end, center, space-between, space-around, space-evenly, stretch	lien
Align-items	flex-start, flex-end, center, stretch, baseline	lien
Align-content	flex-start, flex-end, center, space-between, space-around, stretch	lien
Column-gap	longueur (px, %, em, rem, vh, vw, cqi, cqb, cqw, cqh, cqmin, cqmax), normal	lien
Row-gap	longueur (mêmes unités), normal	lien

Propriétés des enfants

Définies sur les éléments à l'intérieur d'un conteneur flex.

Propriété	Valeurs	MDN
Flex-grow	nombre (par défaut 0)	lien
Flex-shrink	nombre (par défaut 1)	lien
Flex-basis	longueur, auto	lien
Order	entier (par défaut 0)	lien
Align-self	auto, flex-start, flex-end, center, stretch, baseline	lien

---

Quiz

Q1 : Vous voulez trois cartes côte à côte. Quelle est la première chose à définir sur leur parent ?

• A) Flex-grow: 1 sur chaque carte
• B) Display: Flex sur le parent
• C) Column-gap sur le parent

Réponse

B) Display: Flex sur le parent -- Flex commence toujours sur le conteneur. Grow et gap viennent après.

Q2 : Vos cartes sont comprimées sur une seule ligne au lieu de passer à la ligne suivante. Qu'avez-vous oublié ?

• A) Flex-grow
• B) Flex-wrap: wrap
• C) Align-content

Réponse

B) Flex-wrap: wrap -- sans cela, Flex-wrap vaut par défaut nowrap et les enfants rétrécissent pour tenir.

Q3 : Vous avez une barre latérale (250px) et une zone de contenu principal. Comment faire en sorte que la zone principale remplisse l'espace restant ?

• A) Définir la largeur de la zone principale à 100%
• B) Définir le Flex-grow de la zone principale à 1
• C) Définir Justify-content sur stretch sur le conteneur

Réponse

B) Définir le Flex-grow de la zone principale à 1 -- cela lui indique de s'étendre dans tout l'espace disponible. La barre latérale garde sa taille car son Flex-grow est à 0.

Q4 : Vous avez une ligne d'éléments et vous voulez les centrer verticalement. Quelle propriété utilisez-vous ?

• A) Justify-content: center
• B) Align-items: center
• C) Flex-direction: column

Réponse

B) Align-items: center -- en mode row, Align-items contrôle l'axe vertical (transversal). Justify-content contrôle l'axe horizontal (principal).

Q5 : Quelle est la différence entre Column-gap et margin ?

• A) Column-gap ajoute aussi de l'espace à l'extérieur du premier et du dernier élément
• B) Column-gap n'ajoute de l'espace qu'entre les éléments, pas sur les bords extérieurs
• C) Column-gap ne fonctionne que dans les colonnes, pas dans les lignes

Réponse

B) Column-gap n'ajoute de l'espace qu'entre les éléments, pas sur les bords extérieurs -- margin ajoute de l'espace autour de chaque élément, y compris le premier et le dernier.