Mise en page CSS avec Flexbox et les grilles

Une page possède déjà une mise en page avant que tu ajoutes Flexbox ou une grille. Le flux normal place les boîtes dans l’ordre du HTML. Dans un texte horizontal en français, les blocs s’empilent vers le bas et le contenu en ligne se déroule de gauche à droite, puis passe à la ligne lorsque celle-ci est pleine.

Les blocs prennent une ligne

Les paragraphes, titres, divisions et sections sont par défaut des boîtes de bloc. Un bloc avec width: auto remplit la largeur disponible de son conteneur et grandit en hauteur avec son contenu. Définir sa largeur ne place pas pour autant le bloc suivant sur la même ligne.

<p>Read the <a href="/guide">setup guide</a> first.</p>
<p>Then install it.</p>

Les paragraphes commencent sur des lignes distinctes. Le lien est une boîte en ligne dans le premier paragraphe. Même si le premier paragraphe ne mesure que 300px de large, le second commence toujours en dessous.

Les boîtes en ligne suivent le texte

Un <span>, <a>, <strong> ou <em> ne prend normalement que la largeur de son texte. Une boîte en ligne non remplacée ignore width et height. Ajouter a { width: 200px; } ne donne donc pas au lien une largeur de 200 px.

Les marges intérieures, bordures et marges extérieures horizontales écartent le texte adjacent. Les marges intérieures et bordures verticales sont dessinées, mais elles n’écartent pas davantage les lignes environnantes ; un grand arrière-plan peut chevaucher la ligne du dessus ou du dessous. Les marges extérieures verticales n’ont aucun effet. Une image est un élément remplacé : elle est en ligne par défaut, mais width et height s’y appliquent.

Les marges verticales peuvent fusionner

Dans le flux normal, les marges verticales de boîtes de bloc qui se touchent peuvent fusionner en un seul espace. Un paragraphe avec margin-bottom: 24px suivi d’un titre avec margin-top: 32px laisse 32 px entre les deux. La plus grande marge positive l’emporte ; l’espace n’est pas de 56 px. Avec une marge positive de 24 px et une marge de −10 px, le résultat est de 14 px. Les marges horizontales restent distinctes.

La marge supérieure d’un premier enfant peut aussi fusionner avec celle de son parent lorsqu’aucune bordure, marge intérieure ou contenu en ligne ne les sépare. Une marge supérieure de 20 px sur un titre peut déplacer vers le bas tout un en-tête sans marge intérieure, sans laisser d’espace à l’intérieur. Utilise une marge intérieure supérieure pour créer un espace intérieur, ajoute une bordure ou donne display: flow-root au parent. La marge inférieure d’un dernier enfant peut aussi fusionner avec celle de son parent.

Les éléments flexibles et les éléments de grille ne fusionnent pas leurs marges entre eux. Si tu fais passer un parent du flux normal à Flexbox, les deux mêmes marges positives peuvent alors s’additionner. Les boîtes flottantes et celles positionnées en absolu gardent elles aussi leurs marges distinctes.

Les directions suivent le mode d’écriture

La direction de bloc est celle dans laquelle vont les blocs successifs ; la direction en ligne est celle dans laquelle le texte se déroule. L’arabe et l’hébreu utilisent aussi des lignes horizontales, mais leur direction en ligne va de droite à gauche. Les propriétés logiques suivent ces directions : margin-inline-start: 16px donne une marge à gauche en français et une marge à droite en arabe. padding-block définit la marge intérieure dans la direction de bloc.

La propriété display contrôle la relation d’une boîte avec son parent et la disposition de ses enfants. Ce sont deux choix distincts. Un conteneur flexible peut occuper toute une ligne tout en disposant ses propres enfants côte à côte.

Lire display de l’extérieur vers l’intérieur

Le type d’affichage externe est de bloc ou en ligne. Le type d’affichage interne décrit la mise en page à l’intérieur de la boîte, par exemple un flux, une mise en page flexible ou une grille.

La syntaxe moderne à deux mots-clés rend cette distinction visible : display: inline flex signifie la même chose que inline-flex. display: block flow-root signifie la même chose que flow-root. Une valeur unique comme grid fournit par défaut un type externe de bloc.

Faire accepter des dimensions à une boîte en ligne

nav a {
  display: inline-block;
  padding: 12px 16px;
}

Chaque lien reste sur une ligne de texte, mais accepte désormais une largeur, une hauteur et des marges verticales. Sa marge intérieure verticale crée de la place dans la disposition des lignes au lieu d’être simplement dessinée sur les lignes voisines. Le lien dispose ainsi d’une cible de clic plus grande.

Les espaces et sauts de ligne entre les éléments inline-block dans le HTML apparaissent sous la forme d’un petit espace entre les boîtes. Si tu as besoin d’une rangée maîtrisée avec un espace précis, Flexbox le permet directement.

Modifier display ne change pas le sens de l’élément HTML. Une division mise en forme en ligne reste un conteneur générique. Choisis une liste, un lien ou un bouton selon sa fonction, puis mets sa boîte en forme.

Masquer une boîte avec l’effet voulu

Un message d’erreur masqué avec display: none ne crée aucun espace. L’afficher pousse le contenu suivant vers le bas. Utiliser visibility: hidden réserve l’espace : révéler le message n’a donc pas nécessairement besoin de déplacer quoi que ce soit. display: none empêche aussi le focus clavier et retire le contenu masqué de ce qu’annoncent les lecteurs d’écran. Une classe de masquage visuel a une autre fonction : garder le texte accessible aux lecteurs d’écran tout en le masquant visuellement.

Enfants et régions indépendantes

Avec ul { display: grid; }, les éléments de liste deviennent des éléments de grille. Les liens à l’intérieur de ces éléments de liste restent dans la mise en page de leur propre parent. Pour disposer ces liens, donne à l’élément de liste sa propre mise en page ou utilise une sous-grille lorsque des pistes partagées sont nécessaires.

display: contents supprime la boîte propre au conteneur pour que ses enfants participent à la mise en page environnante. Le comportement des navigateurs en matière d’accessibilité peut aussi supprimer le rôle du conteneur : évite donc cette valeur sur les contrôles porteurs de sens, les listes et les tableaux.

display: flow-root crée un contexte de formatage de bloc, une région de flux indépendante. Il contient les enfants flottants et empêche les marges du parent de fusionner avec celles de ses enfants. Il produit ces effets sans ajouter de découpage ni de barres de défilement.

Dans un article, un portrait doit souvent être accompagné de texte sur quelques lignes, puis le texte doit reprendre toute la largeur en dessous. Un élément flottant crée cette disposition du texte. Il a un rôle différent de celui d’une barre latérale qui reste dans une colonne distincte.

Placer une image à côté du texte

img.portrait {
  float: left;
  width: 160px;
  margin: 0 16px 8px 0;
}

Place l’image avant les paragraphes qui doivent l’habiller. L’image se déplace vers le bord gauche de son conteneur. Le texte qui suit utilise l’espace à sa droite, en restant à 16 px horizontalement et à 8 px sous son bord inférieur. Une fois le bas de l’image dépassé, les lignes reprennent toute la largeur du conteneur. Utilise float: right pour le bord opposé et float: none pour supprimer le flottement.

Un élément flottant est retiré du flux normal, mais le contenu en ligne voisin continue à l’habiller. Les boîtes de bloc qui suivent ignorent elles-mêmes l’élément flottant : leurs arrière-plans et leurs bordures peuvent s’étendre derrière lui. Voir l’arrière-plan d’un paragraphe sous l’image ne signifie pas que son texte ne l’habille pas correctement.

Un élément flottant devient une boîte de niveau bloc. Un <span> flottant peut donc accepter une largeur et une hauteur. Sans largeur définie, une boîte de texte flottante se réduit pour s’adapter à son contenu ; une image possède ses propres dimensions.

Commencer la section suivante sous l’image

Supposons que le texte soit plus court que le portrait et qu’un nouveau titre de section commence à côté de celui-ci. La propriété clear contrôle cette disposition :

.next-section {
  clear: both;
}

Le titre se déplace sous les éléments flottants précédents, quel que soit leur côté. clear: left ne le place que sous les éléments flottants à gauche ; clear: right uniquement sous ceux à droite. Appliquer clear à un titre ultérieur ne transforme pas pour autant l’image précédente en bloc ordinaire.

Faire contenir les éléments flottants par le parent

Un parent qui ne possède que des enfants flottants ne tire d’eux aucune hauteur dans le flux normal. Son arrière-plan et sa bordure peuvent sembler réduits, et le contenu suivant peut remonter à côté des éléments flottants. Fais en sorte que le parent les contienne :

.profile {
  display: flow-root;
}

La hauteur du parent englobe désormais l’image flottante. C’est différent de clear : flow-root modifie la région de flux du parent, tandis que clear déplace un élément suivant sous les éléments flottants.

Les feuilles de style plus anciennes contiennent souvent un clearfix : un pseudo-élément ::after avec content: "", display: block et clear: both. Tu peux aussi rencontrer overflow: auto utilisé pour contenir les éléments flottants. Cette solution peut ajouter un défilement lorsque le contenu est trop grand ; flow-root exprime directement le confinement recherché.

Reconnaître les anciennes mises en page en colonnes

Avant Flexbox et les grilles, les colonnes de page étaient souvent flottantes, avec des largeurs en pourcentage et des règles clear. Assure la maintenance de ces règles en comprenant les éléments flottants, mais choisis Flexbox ou une grille pour les nouvelles colonnes qui nécessitent un dimensionnement et un alignement.

Un enfant direct d’un conteneur flexible ou de grille suit cette mise en page : float n’a donc aucun effet sur cet élément. Si le texte cesse d’habiller une image flottante après l’ajout de display: flex à son parent, inspecte d’abord la mise en page du parent.

Le positionnement permet à une boîte d’en chevaucher une autre ou de s’éloigner de sa place normale. Avant de définir un décalage, décide si la boîte doit conserver son espace d’origine et quel ancêtre doit lui servir de référence.

Positionnements statique, relatif et absolu

Avec position: relative; top: 10px; left: 20px, une boîte est dessinée 10 px plus bas et 20 px plus à droite que sa position d’origine. Ses voisins restent à leur place. L’espace d’origine est conservé : un grand décalage peut donc faire chevaucher la boîte et ses voisins.

Un parent positionné en relatif n’a pas besoin de décalage pour servir de référence à un enfant positionné en absolu. C’est un usage courant du positionnement relatif.

Ancrer un badge à une carte

.card {
  position: relative;
}
.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

Le badge est hors du flux normal : la carte ne lui réserve donc aucun espace. Ses bords supérieur et droit sont situés 8 px vers l’intérieur à partir des bords de la marge intérieure de la carte. Laisse assez de place dans le contenu de la carte pour qu’un long titre ne passe pas sous le badge.

Le bloc englobant d’une boîte positionnée en absolu est généralement la boîte incluant la marge intérieure de son ancêtre positionné le plus proche. Un élément positionné possède une valeur de position autre que static. Si la carte reste statique, le badge cherche plus haut dans la chaîne des ancêtres. En l’absence d’ancêtre répondant à ce critère, il utilise le bloc englobant initial : un rectangle de la taille de la zone d’affichage, situé en haut du document et qui défile avec la page. Une propriété transform, filter ou perspective d’un ancêtre dont la valeur est autre que none peut aussi établir cette référence.

Étendre ou centrer un calque de superposition

Une boîte positionnée en absolu, de taille automatique et dont les décalages ne l’étirent pas, se réduit pour s’adapter à son contenu. Définir les décalages gauche et droit avec une largeur automatique lui fait remplir l’espace entre les deux ; la paire supérieure et inférieure fonctionne de façon similaire pour une hauteur automatique.

.overlay {
  position: absolute;
  inset: 0;
}

inset définit ensemble les décalages supérieur, droit, inférieur et gauche. Avec des dimensions automatiques et sans marges, ce calque remplit le bloc englobant. Une largeur ou une hauteur définie modifie le dimensionnement : supprime donc ces limites lorsque le calque doit couvrir toute la boîte.

Pour centrer un badge de dimensions inconnues, utilise top: 50%; left: 50%; transform: translate(-50%, -50%). Les décalages déplacent son coin supérieur gauche au centre du bloc englobant. La translation le ramène en arrière de la moitié de sa propre largeur et de sa propre hauteur. Lorsque la largeur et la hauteur sont connues, inset: 0; margin: auto constitue une autre méthode de centrage.

Vérifier la référence des pourcentages

Un parent en content-box avec width: 400px et une marge intérieure horizontale de 20 px possède une boîte incluant la marge intérieure de 440 px. Un enfant positionné en absolu avec width: 50% possède donc une largeur de contenu de 220 px. Mesurer uniquement la boîte de contenu de 400 px du parent donne un résultat erroné.

Utilise le positionnement absolu pour un badge, une infobulle ou un calque de superposition. Les colonnes d’une page ont besoin de boîtes qui réagissent aux dimensions les unes des autres ; Flexbox, les grilles et le flux normal offrent cette relation.

Un contrôle de retour en haut et un en-tête de tableau doivent tous deux rester visibles, mais ils entretiennent des relations différentes avec la page. Le positionnement fixe attache un contrôle à une fenêtre de référence. Le positionnement adhérent garde une boîte dans le flux et limite son déplacement à sa section.

Fixer un contrôle à la zone d’affichage

.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
}

Le bouton reste dans le coin inférieur droit de la fenêtre pendant le défilement du document. Il ne prend aucune place dans le flux normal. Un en-tête fixe ne réserve pas non plus d’espace et peut recouvrir le premier paragraphe.

Pour un en-tête fixe de 64 px, body { padding-top: 64px; } laisse de la place pour le premier contenu. Définis aussi html { scroll-padding-top: 64px; } pour que les liens vers les sections ne placent pas leurs titres cibles sous l’en-tête. Donne un arrière-plan à l’en-tête pour que le texte qui défile derrière ne transparaisse pas.

Une propriété transform, filter ou perspective d’un ancêtre dont la valeur est autre que none peut faire de cet ancêtre le bloc englobant de l’élément fixe. L’élément reste alors à l’intérieur de cet ancêtre et peut défiler avec lui. Inspecte les ancêtres lorsqu’un contrôle fixe se déplace avec la page sans que tu t’y attendes.

Faire adhérer un titre dans une section

thead th {
  position: sticky;
  top: 0;
  background: white;
}

Un titre adhérent occupe d’abord sa place normale. Lorsque le défilement le ferait passer au-dessus du seuil top: 0, il reste à ce seuil. Il ne peut pas dépasser son bloc englobant : la fin de sa section finit par le pousser hors de la zone visible. C’est utile pour les longs tableaux et la navigation entre sections.

La zone d’affichage est la référence habituelle du positionnement fixe. Le positionnement adhérent utilise l’ancêtre de défilement pertinent le plus proche ; la page sert de référence lorsqu’aucune boîte de défilement plus proche n’intervient.

Diagnostiquer une boîte adhérente qui n’adhère pas

Vérifie ces causes dans l’ordre :

1. Définis un décalage autre que auto sur l’axe où l’élément doit adhérer, comme top: 0 pour un défilement vertical. Le mot-clé sticky seul ne définit aucun seuil.
2. Cherche parmi les ancêtres ceux qui possèdent overflow: hidden, auto ou scroll. Ils peuvent devenir la référence de l’élément adhérent même lorsqu’une autre boîte défile réellement.
3. Compare la hauteur de la boîte adhérente à celle de son bloc englobant. Un conteneur qui n’est pas plus haut que son titre ne laisse à celui-ci aucune place pour se déplacer.

Une barre latérale adhérente dans une grille peut aussi s’étirer sur toute la hauteur de la ligne. align-self: start lui permet de garder la hauteur de son contenu et lui laisse de la place pour se déplacer.

Garder le contenu et le focus visibles

Les barres fixes et adhérentes utilisent une partie de l’écran visible. Lorsque le texte est agrandi à 200 %, une barre de navigation peut devenir beaucoup plus haute. Teste la navigation au clavier ainsi que le défilement. Le critère 2.4.11 des WCAG 2.2, Focus non masqué (minimum), exige que le contenu ajouté par l’auteur ne masque pas entièrement un élément ayant le focus. Garde les barres peu hautes et prévois un espace de défilement adapté autour des cibles.

Lorsque des boîtes se chevauchent, l’ordre d’empilement détermine celle que tu vois au premier plan. Une valeur de z-index plus élevée peut faire passer une boîte devant, mais uniquement dans le groupe où cette valeur est comparée.

Faire appliquer z-index

z-index fonctionne sur les éléments positionnés ainsi que sur les éléments flexibles ou de grille. Un paragraphe statique dans le flux normal l’ignore. Un élément de grille statique peut l’utiliser sans ajouter position: relative.

Sans niveaux explicites, les boîtes positionnées sont dessinées au-dessus des boîtes ordinaires non positionnées. Pour des boîtes comparables au même niveau, celle qui se trouve le plus loin dans le HTML est dessinée au-dessus. Les valeurs positives, nulles et négatives de z-index te donnent davantage de contrôle sur cet ordre.

Un contexte est empilé comme une seule unité

Un contexte d’empilement contient un groupe que le navigateur empile comme un tout. Le niveau d’un enfant ne peut pas faire passer le groupe au-dessus d’un contexte frère situé plus haut.

.site-header {
  position: relative;
  z-index: 1;
}
.menu {
  position: absolute;
  z-index: 9999;
}
main {
  position: relative;
  z-index: 2;
}

Ici, .menu se trouve dans .site-header, tandis que main est son élément frère. Compare d’abord les groupes extérieurs : l’en-tête est au niveau 1 et main au niveau 2. Main est dessiné au-dessus de tout l’en-tête, y compris du menu. Augmenter 9 999 ne change que la place du menu dans l’en-tête.

Augmente le niveau de l’en-tête lui-même, par exemple à z-index: 3, ou supprime le niveau inutile sur main. Choisis la modification qui correspond à l’ordre voulu pour toute la page.

Trouver ce qui crée le groupe

L’élément racine crée un contexte d’empilement. Parmi les autres causes courantes :

• Une boîte positionnée en relatif ou en absolu avec un z-index autre que auto.
• Un élément flexible ou de grille avec un z-index autre que auto.
• Toute boîte fixe ou adhérente.
• Une valeur de opacity inférieure à 1, ou une valeur de transform ou filter autre que none.
• isolation: isolate.

Un parent avec opacity: 0.9 peut donc piéger un menu déroulant même si personne n’a défini de niveau sur ce parent. Remonte les ancêtres dans les outils de développement lorsqu’un nombre plus élevé ne produit aucune différence visible. Cherche la première paire de groupes frères dont l’ordre est incorrect.

Garder les décorations à l’intérieur d’un composant

.panel {
  position: relative;
  isolation: isolate;
}
.panel-decoration {
  position: absolute;
  inset: 0;
  z-index: -1;
}

isolation: isolate crée un contexte sans changer l’apparence du panneau. L’enfant dont le niveau est négatif est dessiné derrière le texte du panneau mais au-dessus de son arrière-plan. Sans contexte local, il peut passer derrière l’arrière-plan du parent et disparaître.

Utilise une petite échelle partagée pour les couches prévues sur la page : par exemple, 1 pour les cartes surélevées, 10 pour un en-tête adhérent, 100 pour les menus déroulants et 1 000 pour une boîte de dialogue modale. Les propriétés personnalisées CSS telles que --z-dropdown: 100 facilitent la maintenance de ces choix.

Flexbox dispose un groupe selon une direction principale. Il convient aux liens de navigation, aux barres d’outils et aux autres éléments dont les dimensions dépendent de leur contenu. Une mise en page flexible avec retour à la ligne peut comporter plusieurs lignes, mais chacune partage son espace indépendamment.

Créer le conteneur

.nav {
  display: flex;
}

Les enfants directs de la navigation deviennent des éléments flexibles. Un lien dans un élément de liste n’est pas un élément flexible de la navigation, sauf s’il en est aussi un enfant direct. Le texte placé directement dans le conteneur forme un élément flexible anonyme.

Par défaut, les éléments sont disposés en rangée, sans retour à la ligne ni agrandissement, mais peuvent rétrécir. Ils commencent au bord de début de l’axe principal. Dans une rangée horizontale, les éléments de hauteur automatique s’étirent jusqu’à la hauteur de la ligne et semblent donc souvent avoir la même hauteur.

Nommer les axes avant d’aligner

L’axe principal suit flex-direction. L’axe secondaire lui est perpendiculaire. Dans un texte horizontal en français :

Une rangée suit la direction en ligne : son début se trouve donc à droite dans un texte écrit de droite à gauche. Une colonne suit la direction de bloc. Les termes principal et secondaire décrivent des rôles, pas des directions horizontale et verticale permanentes.

justify-content agit sur l’axe principal. align-items agit sur l’axe secondaire. Après le passage d’une rangée à une colonne, justify-content: center centre verticalement, à condition qu’il reste de la hauteur disponible.

Calculer quels éléments tiennent

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 1 1 200px;
}

Considère cinq cartes dans une zone de contenu de 700 px de large. Chacune commence à 200 px et peut grandir ou rétrécir. Trois cartes et deux espaces nécessitent 632 px ; quatre cartes et trois espaces nécessitent 848 px. Trois cartes tiennent sur la première ligne.

La première ligne se partage 700 px moins 32 px d’espaces : chaque carte mesure environ 222,7 px de large. Les deux restantes se partagent 700 px moins un espace de 16 px : chacune mesure 342 px de large. Les éléments de la seconde ligne n’héritent pas des largeurs de la première. Utilise une grille lorsque les colonnes doivent être alignées d’une ligne à l’autre.

flex-flow: row wrap est une propriété raccourcie pour la direction et le retour à la ligne. Sans retour à la ligne, Flexbox garde tous les éléments sur une seule ligne et les fait rétrécir lorsque leurs limites de dimensionnement le permettent.

Garder un ordre de lecture cohérent

order vaut 0 par défaut. Les valeurs les plus faibles apparaissent en premier ; order: -1 place un élément avant les éléments ordinaires. Les directions inversées et order changent l’ordre d’affichage, tandis que les lecteurs d’écran et le focus clavier normal suivent toujours le HTML.

Garde les séquences importantes dans un ordre cohérent dans le HTML. Modifier l’ordre visuel peut faire sauter une personne qui utilise le clavier d’un endroit à l’autre de l’écran et peut contrevenir aux critères WCAG 1.3.2, Ordre séquentiel logique, ou 2.4.3, Parcours du focus, lorsque le sens ou l’utilisation en pâtit.

Un élément peut aussi être un conteneur. Une carte dans une rangée flexible peut utiliser son propre display: flex; flex-direction: column pour empiler son contenu. Utilise inline-flex lorsque le conteneur externe doit se placer dans une ligne de texte, comme un bouton contenant une icône et un libellé.

Flexbox commence par attribuer une taille à chaque élément, puis ajuste ces tailles pour les adapter au conteneur. Les trois parties de flex contrôlent cet ajustement : agrandissement, rétrécissement et base, dans cet ordre.

Partir de la base

flex-basis fournit la taille de départ sur l’axe principal. Avec auto, elle utilise la largeur de l’élément dans une rangée ou sa hauteur dans une colonne ; si cette dimension est également automatique, c’est le contenu qui la détermine. Une base explicite prend le pas sur la largeur, tandis que les tailles minimale et maximale limitent toujours le résultat final.

Soustrais toutes les bases et tous les espaces de la taille du contenu du conteneur. Un résultat positif représente l’espace libre disponible pour l’agrandissement. Un résultat négatif représente l’espace que les éléments doivent céder.

Partager l’espace positif

Trois éléments dans une rangée de 600 px ont chacun une base de 100 px et des facteurs d’agrandissement de 1, 1 et 2. Sans espaces, les bases occupent 300 px et il reste 300 px. Les quatre parts d’agrandissement divisent ce reste en parts de 75 px chacune. Les tailles finales sont de 175 px, 175 px et 250 px.

Ajoute maintenant gap: 20px. Deux espaces occupent 40 px et il reste 260 px après déduction des bases. Chaque part passe à 65 px ; les largeurs finales deviennent 165 px, 165 px et 230 px. Un facteur de 2 double l’espace ajouté, pas la largeur finale entière.

Céder de l’espace par un rétrécissement pondéré

Deux éléments dont les bases mesurent 300 px et 400 px occupent un conteneur de 500 px sans espace entre eux. Ils doivent perdre 200 px. Si les deux ont flex-shrink: 1, leurs poids de rétrécissement sont 300 et 400 : chaque facteur est multiplié par sa taille de base.

Le premier perd environ 85,7 px et mesure finalement environ 214,3 px. Le second perd environ 114,3 px et mesure finalement environ 285,7 px. Des facteurs de rétrécissement égaux ne signifient pas des pertes égales en pixels. flex-shrink: 0 protège la taille de base d’un élément, ce qui est utile pour un avatar ou un logo.

Ces calculs décrivent des éléments sans marges intérieures, bordures, marges extérieures ou limites de taille qui modifieraient le résultat. Vérifie ces contraintes lorsqu’une mise en page réelle donne un résultat différent.

Lire les valeurs raccourcies courantes

Deux éléments dont le contenu mesure 80 px et 200 px de large dans une rangée de 600 px atteignent 240 px et 360 px avec flex: auto : chacun gagne la moitié des 320 px restants. Avec flex: 1 et sans minimum limitant, les deux partent de zéro et atteignent 300 px de large.

Permettre à une colonne flexible de rétrécir

Le minimum automatique d’un élément flexible peut le maintenir aussi large qu’une URL ou une ligne de code sans coupure. Autorise le rétrécissement de l’élément et gère le contenu à l’intérieur :

.sidebar { flex: 0 0 240px; }
.main { flex: 1; min-width: 0; }
.main pre { overflow-x: auto; }

La barre latérale reste large de 240 px. La région principale prend le reste. Le code défile à l’intérieur de la région principale au lieu de forcer toute la page à s’élargir. Pour du texte long ordinaire, overflow-wrap: anywhere autorise les coupures. Un minimum nul rend de l’espace disponible ; il ne provoque pas à lui seul le retour à la ligne ou le défilement du contenu.

L’alignement intervient après le dimensionnement. Repère l’axe principal, l’axe secondaire et l’espace restant sur chacun. Une propriété peut être valide sans produire de différence visible lorsqu’il ne reste plus de place à répartir.

Partager l’espace sur l’axe principal

justify-content positionne le groupe sur l’axe principal. Pour trois éléments de 100 px dans une rangée de 600 px sans espace entre eux, il reste 300 px :

flex-start regroupe les éléments au début de l’axe principal ; flex-end les regroupe à la fin. start et end suivent la direction d’écriture. Dans un conteneur row-reverse en français, flex-start regroupe les éléments contre le bord droit, mais start les regroupe contre le bord gauche.

Si des éléments avec flex: 1 utilisent tout l’espace de la ligne, justify-content n’a plus rien à répartir. Réduire ou supprimer l’agrandissement change cette situation.

Aligner dans chaque ligne

align-items positionne les éléments sur l’axe secondaire à l’intérieur de leur ligne. La valeur habituelle par défaut, stretch, permet aux éléments de hauteur automatique d’une rangée de remplir la hauteur de la ligne. Un élément dont la hauteur est définie ne s’étire pas ainsi. Utilise center, start ou end pour d’autres positions, ou baseline pour aligner des textes de tailles différentes sur leur ligne de base.

align-self remplace ce choix pour un élément. Flexbox ne possède pas de justify-self : les éléments partagent l’axe principal en tant que groupe. justify-items n’aligne pas non plus les éléments flexibles.

Pour centrer un enfant unique dans les deux directions, définis justify-content: center; align-items: center sur son parent flexible. Un parent plus haut, par exemple avec min-height: 100vh, laisse assez de place pour que le centrage vertical soit visible. Si l’élément unique remplit déjà la dimension de la ligne sur l’axe secondaire, le centrer sur cet axe ne produit aucun déplacement.

Séparer des groupes avec des marges automatiques

nav {
  display: flex;
  align-items: center;
  gap: 16px;
}
.logo {
  margin-inline-end: auto;
}

Dans un texte horizontal en français, le logo reste à gauche tandis que les liens se déplacent à droite. Sa marge automatique de fin absorbe l’espace restant. Une marge automatique de début sur un élément pousse au contraire cet élément et ceux qui le suivent vers la fin. Les marges logiques s’adaptent lorsque la direction du texte change.

Un élément unique avec margin: auto peut être centré sur les deux axes. Lorsqu’un élément est trop grand, les marges automatiques évitent de placer son débordement au-delà du bord de début inaccessible, ce que peut faire un centrage ordinaire.

Distinguer les lignes des éléments

align-content déplace les lignes en groupe sur l’axe secondaire dans un conteneur avec retour à la ligne qui dispose d’espace libre. Cette propriété n’a aucun effet avec flex-wrap: nowrap. Avec wrap, elle peut tout de même positionner une ligne même si les éléments actuels tiennent sur une seule ligne. align-items gère les éléments à l’intérieur de chaque ligne.

gap: 16px 24px définit un espace de 16 px entre les lignes et de 24 px entre les colonnes. La propriété gap crée de l’espace entre les éléments et les lignes, jamais autour de l’extérieur du conteneur. Ajoute une marge intérieure pour obtenir un espace extérieur. Tout espace réparti par l’alignement s’ajoute à l’espace défini par gap.

Une grille définit ensemble des lignes et des colonnes. Définis les pistes sur un conteneur, puis laisse ses enfants directs les occuper. Contrairement aux lignes flexibles issues d’un retour à la ligne, les lignes d’une grille partagent la même structure de colonnes.

Nommer les parties

Une piste est une ligne ou une colonne située entre deux lignes de grille. Une cellule est l’intersection d’une ligne et d’une colonne. Une zone de grille est un rectangle d’une ou de plusieurs cellules. Des espaces séparent les pistes.

.dashboard {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  gap: 20px;
}

grid-template-columns définit les colonnes explicites ; grid-template-rows définit les lignes explicites. Sans colonnes explicites, une grille possède une colonne et ses éléments s’empilent en lignes.

Calculer une part en fr

L’unité fr partage l’espace restant après déduction des pistes fixes et des espaces. Dans un conteneur de 900 px, l’exemple comporte une colonne fixe de 200 px et deux espaces de 20 px. Soustrais-les d’abord : il reste 660 px. Les deux colonnes flexibles demandent trois parts au total ; une part mesure donc 220 px. Les largeurs sont de 200 px, 220 px et 440 px.

Les fractions divisent l’espace restant pour les pistes, pas les 900 px entiers. Une piste 2fr reçoit deux fois la part flexible d’une piste 1fr lorsque les tailles minimales ne les contraignent pas.

Répéter des pistes et définir des limites

repeat(4, 1fr) est une forme raccourcie pour quatre pistes flexibles égales. Il est aussi possible de répéter un motif : repeat(2, 100px 1fr) crée 100px 1fr 100px 1fr.

Les dimensions des pistes peuvent aussi utiliser des longueurs, des pourcentages, auto, min-content et max-content. Les mots-clés relatifs au contenu demandent des dimensions fondées sur les besoins intrinsèques du contenu.

minmax(150px, 1fr) donne à une piste un minimum de 150 px et un maximum flexible. Pour les lignes créées automatiquement, utilise grid-auto-rows: minmax(100px, auto) afin d’obtenir un minimum de 100 px tout en permettant à un contenu plus haut d’agrandir une ligne.

Une piste 1fr seule possède un minimum automatique, comme minmax(auto, 1fr). Une longue URL sans coupure peut rendre une colonne plus large que les autres. Utilise repeat(3, minmax(0, 1fr)) lorsque les colonnes doivent se partager également la largeur disponible, et prévois le retour à la ligne ou le défilement du contenu trop grand à l’intérieur.

Garder les espaces dans la largeur disponible

gap: 16px 32px signifie 16 px entre les lignes et 32 px entre les colonnes. Cette propriété ne crée aucune marge intérieure autour de la grille.

Trois colonnes de 33.33% utilisent déjà presque toute la largeur d’un conteneur de 900 px. Deux espaces de 20 px ajoutent alors environ 40 px au-delà de sa largeur. Les pistes fractionnaires tiennent compte de ces espaces avant de partager la place ; repeat(3, 1fr) évite donc ce débordement dû aux pourcentages et aux espaces lorsque les minimums du contenu tiennent dans le conteneur.

Laisser les lignes s’adapter au contenu

grid-template-rows: auto 1fr auto convient à un en-tête, une région principale et un pied de page. Les lignes extérieures s’adaptent à leur contenu. Lorsqu’une hauteur ou une hauteur minimale de conteneur est à remplir, la ligne centrale prend la hauteur restante. Garde de la place pour un contenu qui grandit ; une hauteur minimale de page permet à une page plus longue de s’agrandir.

Le placement dans une grille décrit les limites d’un élément. Compte les lignes de grille autour des colonnes et des lignes, ou nomme une région rectangulaire et places-y l’élément. Les deux méthodes disposent les boîtes sans modifier leur ordre dans le HTML.

Compter les limites, pas les colonnes

Une grille à trois colonnes possède quatre lignes de grille verticales. Dans un texte horizontal en français, la ligne verticale 1 est à gauche et la ligne horizontale 1 est en haut. Les nombres négatifs comptent à rebours depuis la fin de la grille explicite : -1 est sa dernière ligne.

Pour couvrir trois colonnes à partir de la ligne 1, termine à la ligne 4. Terminer à la ligne 3 ne couvre que deux pistes.

Dans un tableau de bord à quatre colonnes et trois lignes, place un graphique avec grid-column: 1 / 4; grid-row: 1 / 3. Il occupe trois colonnes et deux lignes : six cellules. Un panneau de statistiques placé avec grid-column: 4; grid-row: 1 / 3 occupe la dernière colonne à côté. Un tableau placé avec grid-column: 1 / -1; grid-row: 3 remplit la troisième ligne.

Dessiner la page avec des noms de zones

.page {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "nav    main"
    "footer footer";
}
header { grid-area: header; }
nav    { grid-area: nav; }
main   { grid-area: main; }
footer { grid-area: footer; }

Chaque chaîne décrit une ligne et chaque mot décrit une cellule. Répéter header sur la première ligne permet à l’en-tête de couvrir les deux colonnes. Un point marque une cellule vide. Chaque ligne doit contenir le même nombre de cellules et chaque nom répété doit former un rectangle. Une zone nommée en forme de L rend toute la déclaration grid-template-areas invalide.

Une zone appelée main crée aussi des lignes appelées main-start et main-end. Tu peux utiliser ces noms pour les limites d’un autre élément. Définis des noms de lignes personnalisés entre crochets dans la liste des pistes, comme [content-start] 600px [content-end].

Superposer des éléments dans une zone de grille

Une image et sa légende peuvent toutes deux utiliser grid-area: 1 / 1. Elles partagent la première cellule ; la légende, située plus loin dans le HTML, est dessinée sur l’image. align-self: end déplace la légende vers le bas de cette zone. Les éléments de grille acceptent z-index sans nécessiter une position non statique : tu peux donc modifier explicitement leur ordre de superposition.

Préserver l’ordre de lecture

Le placement manuel modifie l’apparence, pas l’ordre du HTML suivi par les lecteurs d’écran et le focus clavier. Garde les instructions, les titres et les liens dans un ordre cohérent dans le code source. Une mise en page peut sembler logique alors que la navigation par tabulation saute entre des cellules éloignées ; cela peut contrevenir aux critères WCAG 1.3.2 ou 2.4.3 lorsque le sens ou l’utilisation en pâtit.

Une liste de produits peut passer de quelques cartes à un grand nombre sans modification de son CSS. Définis les colonnes, laisse le placement automatique créer les lignes et choisis si les colonnes inutilisées doivent conserver leur espace.

Laisser les éléments trouver la cellule suivante

La valeur par défaut grid-auto-flow: row place les éléments sans position définie dans l’ordre du code source, en parcourant une ligne puis en descendant à la suivante. Elle saute les cellules occupées. Les pistes supplémentaires forment la grille implicite.

.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(150px, auto);
}

Sept éléments créent trois lignes. La dernière ligne contient un élément. Chaque ligne mesure au moins 150 px de haut et peut grandir avec son contenu. Les pistes explicites proviennent du modèle ; les pistes implicites sont ajoutées selon les besoins du placement.

Les numéros de ligne négatifs ne comptent que dans la grille explicite. Si tu définis des colonnes mais aucune ligne, grid-row: 1 / -1 ne peut pas désigner toutes les lignes créées automatiquement. Définis des lignes explicites lorsqu’un élément doit couvrir toute leur hauteur.

grid-auto-flow: column remplit les colonnes et crée des colonnes supplémentaires dimensionnées par grid-auto-columns. Ajouter dense permet à des éléments plus petits situés plus loin dans le code de combler les trous laissés par des éléments qui s’étendent davantage. Cela peut modifier l’ordre visuel : évite donc cette valeur pour des instructions ordonnées ou tout autre contenu dont l’ordre compte.

Compter les colonnes à partir d’un minimum

.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

Dans une zone de contenu de 1 000 px de large, quatre colonnes de 200 px et trois espaces de 16 px nécessitent 848 px. Cinq colonnes et quatre espaces nécessitent 1 064 px : seules quatre colonnes tiennent donc. Leurs largeurs finales flexibles sont de 238 px : soustrais 48 px d’espaces et divise les 952 px restants par quatre.

À 500 px, deux colonnes à leur minimum et un espace nécessitent 416 px ; trois nécessitent 632 px. Deux tiennent et chacune atteint 242 px. Le nombre de colonnes change avec l’espace disponible sans point de rupture.

Choisir le sort des colonnes inutilisées

Avec assez d’éléments, auto-fill et auto-fit donnent le même aspect. Avec seulement trois éléments dans cette grille de 1 000 px, auto-fill conserve une quatrième colonne vide : chaque colonne occupée reste donc large de 238 px. auto-fit réduit cette piste vide et son espace. Les trois colonnes occupées se partagent alors 968 px et atteignent environ 322,7 px chacune.

Une colonne qui contient un élément, quel que soit son emplacement, est occupée, même si une cellule de sa dernière ligne est vide. Auto-fit réduit les pistes vides, pas chaque cellule vide.

Préserver le conteneur le plus étroit

La répétition automatique nécessite une dimension minimale ou maximale de piste définie. repeat(auto-fill, 1fr) est invalide. Un minimum fixe de 400 px peut aussi déborder d’un conteneur de 320 px. Utilise :

grid-template-columns:
  repeat(auto-fit, minmax(min(100%, 400px), 1fr));

min(100%, 400px) choisit le plus petit minimum : un conteneur étroit peut donc accueillir une piste sans être forcé à 400 px. Continue à gérer le texte ou les images trop grands à l’intérieur des cartes.

L’alignement dans une grille agit à deux échelles différentes. Tu peux déplacer un élément dans sa zone ou déplacer l’ensemble des pistes dans le conteneur. Détermine d’abord quel espace tu souhaites répartir.

Aligner les éléments dans leurs zones

Dans un texte horizontal en français, les propriétés justify- agissent sur l’axe en ligne, horizontal. Les propriétés align- agissent sur l’axe de bloc, vertical. La grille permet d’aligner les éléments sur les deux axes.

Les valeurs comprennent start, end, center et stretch. align-items: baseline aligne les lignes de base du texte. La plupart des éléments de taille automatique s’étirent par défaut. Une image qui possède son propre rapport largeur-hauteur se place normalement au bord de début de la zone au lieu d’être étirée dans les deux directions.

Pour une rangée de cartes, l’étirement fait remplir la hauteur de la ligne par chaque carte. Passe à align-items: start et chaque carte conserve la hauteur de son contenu ; leurs bords inférieurs peuvent différer. align-self: end sur une légende la place en bas de sa zone de grille.

Centrer une boîte dans les deux directions

.hero {
  display: grid;
  place-items: center;
  min-height: 60vh;
}

place-items combine align-items suivi de justify-items. Avec une seule valeur, elle l’applique aux deux. La hauteur minimale crée de l’espace vertical autour d’un élément court. place-self est la propriété raccourcie correspondante pour un élément individuel.

L’élément reste une boîte contenant du texte. Pour centrer les mots dans cette boîte, définis text-align: center sur l’élément. Déplacer une boîte au centre d’une cellule ne change pas l’alignement de son texte.

Déplacer les pistes en groupe

justify-content positionne l’ensemble des colonnes sur l’axe en ligne. align-content positionne les lignes sur l’axe de bloc. Ces propriétés nécessitent de l’espace supplémentaire à l’extérieur des pistes pour que leur effet soit visible.

Pour trois colonnes fixes de 200 px dans un conteneur de 900 px sans espaces, il reste 300 px. justify-content: center laisse 150 px avant la première colonne et après la dernière. justify-content: space-between place les colonnes extérieures contre les bords du conteneur et répartit 150 px entre les colonnes voisines. Les éléments restent dans leurs propres pistes lorsque celles-ci se déplacent.

Si les colonnes utilisent fr et remplissent toute la largeur disponible, il ne reste aucun espace horizontal à répartir pour justify-content. Définir justify-items: center peut tout de même centrer visiblement un enfant étroit dans sa piste large. La première propriété positionne les pistes ; la seconde positionne les éléments.

Une page peut utiliser plusieurs méthodes de mise en page à la fois. Choisis chaque méthode selon la relation entre les boîtes dans la partie concernée : une suite de textes, un groupe flexible, des colonnes partagées ou une couche superposée.

Partir du contenu

Le flux normal gère déjà les articles, les titres et les paragraphes. Il fait passer le texte à la ligne et déplace les blocs suivants vers le bas lorsque le contenu précédent grandit. Ajoute une structure lorsque la conception demande une autre relation.

Flexbox est unidimensionnel : il partage l’espace le long d’une rangée ou d’une colonne, chaque ligne issue d’un retour à la ligne étant indépendante. La grille est bidimensionnelle : elle définit ensemble les colonnes et les lignes. Ces choix concernent les contraintes de la mise en page ; ils n’interdisent pas d’utiliser l’un ou l’autre outil pour une simple rangée.

Comparer une rangée avec retour à la ligne et des colonnes partagées

Sept cartes occupent une zone de contenu de 1 000 px de large avec des espaces de 16 px. Avec Flexbox, donne à chaque carte flex: 1 1 200px et autorise le retour à la ligne. Quatre cartes tiennent sur la première ligne et atteignent 238 px chacune. Les trois cartes de la seconde ligne atteignent environ 322,7 px chacune. Chaque ligne répartit son propre espace libre.

Utilise maintenant repeat(auto-fill, minmax(200px, 1fr)) dans une grille. Quatre colonnes tiennent. Les sept cartes utilisent les mêmes colonnes de 238 px de large ; la dernière ligne laisse une cellule vide. La grille maintient l’alignement d’une ligne à l’autre.

Utilise la version flexible lorsque des éléments plus larges sur la dernière ligne conviennent à la conception. Utilise la grille lorsqu’une structure de colonnes cohérente compte.

Combiner les méthodes à différents niveaux

Une page peut utiliser une grille pour une barre latérale et une région principale, Flexbox pour la barre d’outils de la région principale et un badge positionné en absolu dans une carte. Une carte peut être un élément de grille à l’extérieur et un conteneur flexible à l’intérieur. Définis la relation extérieure sur son parent et la disposition intérieure sur la carte elle-même.

Pour une longue liste de textes, columns: 3 ou column-width: 250px crée un flux multicolonne. Le texte descend dans une colonne puis continue dans la suivante ; ce n’est pas une grille de cartes indépendantes. Vérifie que ce parcours de lecture convient au contenu.

Lire les anciennes mises en page avec attention

Les colonnes flottantes, les grilles inline-block et les tableaux HTML utilisés pour la mise en page apparaissent encore dans le code ancien. Leurs règles d’espacement et de confinement diffèrent de celles de Flexbox et des grilles. Pour construire une nouvelle structure de page, utilise les outils de mise en page modernes. Réserve <table> aux données dont les lignes et les colonnes expriment des relations tabulaires.

Une mise en page utile offre une largeur de contenu lisible, de l’espace sur les bords et de la place pour un contenu plus long. Construis ses régions principales dans le flux pour qu’un article qui grandit pousse naturellement le pied de page vers le bas.

Centrer une colonne de contenu

.container {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 16px;
}

Le maximum limite l’agrandissement sur les écrans larges. Les marges automatiques en ligne répartissent l’espace restant des deux côtés. La marge intérieure maintient le texte à distance des bords sur les écrans étroits. Pour le texte courant, max-width: 65ch donne une longueur de ligne approximative de 65 caractères ; un ch correspond à la largeur du chiffre 0 dans la police utilisée. Une longueur de ligne d’environ 45 à 75 caractères constitue une plage utile pour la lecture, même si la largeur réelle des lettres varie.

Placer les régions de la page sur une grille

.page {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
}
header { grid-area: header; }
aside  { grid-area: sidebar; }
main   { grid-area: main; }
footer { grid-area: footer; }

L’en-tête et le pied de page couvrent les deux colonnes. La barre latérale garde 240 px et la région principale reçoit le reste. Le minimum nul de la piste flexible empêche un contenu large de forcer la piste au-delà de la part disponible. Gère ce contenu par un retour à la ligne ou un défilement dans la région principale.

Le modèle à trois colonnes souvent appelé mise en page du Saint Graal utilise 200px 1fr 200px et les zones "nav main aside" sur la ligne centrale, l’en-tête et le pied de page couvrant les trois colonnes. Les colonnes latérales fixes ont tout de même besoin d’une largeur disponible suffisante ; teste la mise en page à des largeurs réduites.

Garder le pied d’une page courte en bas

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

Avec l’en-tête, la région principale et le pied de page comme enfants directs, la ligne centrale remplit la hauteur inutilisée. Le pied d’une page courte atteint le bas de la fenêtre ; celui d’une page longue suit le contenu. Ce modèle est appelé pied de page collé en bas, mais le pied de page n’a pas besoin de position: sticky.

L’unité traditionnelle relative à la zone d’affichage est vh. Sur les téléphones, 100vh peut s’étendre derrière les contrôles visibles du navigateur. La hauteur dynamique de la zone d’affichage, dvh, suit la hauteur visible lorsque ces contrôles changent ; tous les principaux navigateurs la prennent en charge depuis 2022. Utilise min-height pour qu’un contenu plus long puisse agrandir la page. Une valeur fixe de height peut laisser le contenu déborder sur ce qui suit.

Une variante flexible utilise un corps en colonne avec min-height: 100dvh, puis main { flex: 1; }. Pour une rangée avec barre latérale, utilise .sidebar { flex: 0 0 240px; } et .main { flex: 1; min-width: 0; }.

Faire adhérer une barre latérale et étendre une image

Une barre latérale de grille peut utiliser position: sticky; top: 16px; align-self: start. Conserver la hauteur de son propre contenu lui laisse de la place pour se déplacer dans sa ligne.

Pour du contenu d’article en pleine largeur, définis les colonnes avec 1fr min(65ch, 100% - 32px) 1fr. Place les enfants ordinaires dans la colonne 2 et une image large avec grid-column: 1 / -1. La piste centrale reste lisible tandis que l’image couvre toute la largeur du conteneur.

Les petits éléments d’interface combinent les mêmes relations : une image garde sa taille, le texte remplit l’espace restant, des contrôles liés partagent une rangée ou plusieurs cartes alignent leurs parties intérieures. Donne à chaque conteneur la mise en page qui correspond à son rôle.

Choisir le bon type de centrage

Flexbox peut aussi centrer un enfant avec justify-content: center; align-items: center. Assure-toi que le conteneur dispose d’espace libre sur l’axe concerné.

Une rangée de navigation et une rangée d’objet média

nav { display: flex; align-items: center; gap: 16px; }
.logo { margin-inline-end: auto; }
.media { display: flex; align-items: flex-start; gap: 16px; }
.media img { flex: none; width: 64px; }
.media-body { flex: 1; min-width: 0; }

En français, le logo reste à gauche et les liens se regroupent à droite. Lorsque la navigation possède exactement deux enfants, un logo et une liste de liens, justify-content: space-between peut les séparer ; la liste a besoin de sa propre mise en page flexible pour disposer ses liens.

Dans la rangée d’objet média, l’image garde sa largeur. Le texte reçoit le reste et peut rétrécir. L’alignement au début de l’axe secondaire empêche une image de hauteur automatique de s’étirer pour atteindre la hauteur d’un long bloc de texte. Cela convient à un commentaire, un profil ou une ligne de produit.

Des cartes avec des boutons alignés

.cards {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 24px;
}
.card { display: flex; flex-direction: column; }
.card .button { margin-top: auto; }

La grille parente étire les cartes de chaque ligne à la même hauteur. Dans chaque carte, la marge supérieure automatique utilise l’espace vertical disponible avant le bouton et le place en bas. Les titres peuvent toujours avoir des hauteurs différentes.

Pour aligner les titres, les textes et les pieds des cartes, utilise une sous-grille. Fais de chaque carte un élément de grille qui couvre trois lignes du parent, puis définis display: grid; grid-template-rows: subgrid. Chaque carte adopte ces lignes parentes pour ses trois parties. La sous-grille fonctionne dans les principaux navigateurs depuis septembre 2023.

Calques de superposition, formulaires et groupes de saisie

Pour placer du texte sur une image, transforme le conteneur en grille et place les deux enfants à grid-area: 1 / 1. Une légende située plus loin dans le code est dessinée au-dessus de l’image. Une autre solution consiste à utiliser un conteneur positionné en relatif et une couche de légende positionnée en absolu avec inset: 0.

Un formulaire qui alterne étiquettes et champs peut utiliser grid-template-columns: max-content 1fr; gap: 12px 16px; align-items: center. L’étiquette la plus large définit une colonne d’étiquettes partagée. Les champs s’alignent dans la seconde colonne ; des rangées flexibles distinctes ne peuvent pas partager automatiquement cette largeur d’étiquette.

Un groupe de recherche utilise display: flex; gap: 8px, avec input { flex: 1; min-width: 0; } et button { flex: none; }. Le champ peut rétrécir tandis que le bouton garde sa largeur naturelle. Pour des mots-clés ou des contrôles de barre d’outils qui doivent passer à la ligne en conservant leur largeur naturelle, utilise display: flex; flex-wrap: wrap; gap: 8px.

Un problème de mise en page est plus facile à corriger lorsque tu inspectes les boîtes réelles du navigateur. Commence par l’élément qui s’est déplacé ou qui déborde, puis vérifie la mise en page à laquelle il participe avant de modifier les valeurs.

Inspecter dans un ordre utile

1. Trouve l’élément dans les outils de développement.
2. Inspecte la valeur calculée de display de son parent : le flux normal, la mise en page flexible et la grille donnent des rôles différents aux propriétés.
3. Vérifie si ta propriété s’applique à cet élément dans cette mise en page.
4. Compare les dimensions, marges et positions calculées aux valeurs attendues.
5. Active ou désactive une déclaration à la fois pour voir quelle contrainte cause le problème.

Le panneau du modèle de boîte montre le contenu, la marge intérieure, la bordure et la marge extérieure. Les superpositions de grille montrent les lignes, les numéros, les pistes et les espaces ; les superpositions flexibles montrent les éléments et l’espace qui leur est attribué. Utilise-les pour vérifier ce que le navigateur a construit, et pas seulement ce que prévoyait la feuille de style.

Vérifier les propriétés inactives

Les décalages ne font rien sur un élément statique. La largeur et la hauteur ne font rien sur un <span> en ligne ordinaire, même si elles dimensionnent une image en ligne. z-index nécessite une boîte positionnée ou un élément flexible ou de grille. float n’a aucun effet sur les éléments flexibles ou de grille, et justify-self ne peut pas aligner un élément flexible.

Une déclaration d’alignement valide peut n’avoir aucun effet visible parce que les éléments utilisent déjà tout l’espace. align-content n’a pas non plus d’effet sur un conteneur flexible nowrap. Le positionnement adhérent nécessite un décalage et de la place pour se déplacer.

Repérer la cause d’un débordement horizontal

Un débordement peut venir d’une boîte trop grande ou d’une boîte plus petite poussée au-delà d’un bord par des marges, des décalages ou les largeurs voisines. Parmi les causes courantes :

• Une largeur fixe, comme 1 200 px, supérieure à celle de la zone d’affichage.
• width: 100% associé à une marge intérieure avec le dimensionnement content-box.
• width: 100vw, qui peut inclure la largeur d’une barre de défilement verticale visible.
• Un long mot, une URL ou une ligne de code sans coupure.
• Le minimum automatique d’un élément flexible ou d’une piste 1fr.
• Un minimum de répétition automatique plus large que son conteneur.

Ajoute temporairement * { outline: 1px solid red; } pour révéler les bords. Les contours ne prennent aucune place dans la mise en page : ils montrent donc les limites sans modifier les dimensions des boîtes comme le feraient des bordures.

Étudier un bloc de code large

Une page flexible possède une barre latérale de 240 px et une colonne principale contenant un exemple de code de 1 400 px de large. Toute la page défile horizontalement. La superposition flexible montre que la région principale est plus large que sa part, et sa largeur minimale calculée vaut auto.

.main { min-width: 0; }
.main pre { overflow-x: auto; }

La première règle permet à l’élément flexible de rétrécir. La seconde garde le code large accessible grâce à un défilement horizontal local. Masquer tout le débordement de la page cacherait le symptôme sans rendre le code accessible.

Pour d’autres surprises, inspecte les marges qui fusionnent, un en-tête fixe qui recouvre le contenu, un enfant positionné en absolu dont le parent prévu est statique ou une couche piégée dans un contexte d’empilement créé par opacity ou transform.

Tester du contenu réel et un espace réduit

Redimensionne la fenêtre, utilise un nom long ou une URL longue et agrandis le texte à 200 %. Vérifie le focus clavier près des barres fixes. Le critère 1.4.4 des WCAG 2.2 exige que le texte puisse être redimensionné à 200 % sans perte de contenu ni de fonctionnalité. Le critère 1.4.10 exige généralement une redistribution à 320 pixels CSS sans défilement dans deux directions ; le contenu qui nécessite une mise en page bidimensionnelle, comme un tableau de données, bénéficie d’exceptions. Teste davantage que le court texte d’exemple qui donnait initialement à la page une apparence correcte.