Patterns Flexbox avec Claude Code pour des layouts stables

Flexbox traite les problèmes d’interface sur un axe

Flexbox est le modèle CSS conçu pour répartir des éléments dans une direction principale : une ligne ou une colonne. Dans une interface réelle, on l’utilise pour une navigation, un groupe de boutons, des cartes d’articles, un formulaire court, une barre de recherche, une toolbar ou un bloc CTA de fin d’article. CSS Grid devient préférable quand il faut contrôler lignes et colonnes en même temps. Flexbox reste plus lisible quand le problème est une bande d’interface qui doit s’aligner, s’étirer, se réduire et passer à la ligne.

Claude Code peut produire ce CSS très vite, mais il faut lui donner des contraintes. Une demande vague comme “rends ce bloc responsive” donne souvent une media query correcte en desktop et fragile sur mobile. Un titre traduit peut élargir une carte. Une adresse email peut rendre un champ illisible. Un bouton de consultation peut passer sur deux lignes et perdre sa priorité. Ce sont des problèmes de contenu réel, pas de démonstration.

Ce guide rassemble les termes à connaître, un prompt réutilisable, quatre sections Use case, une liste de Pitfall, du HTML/CSS copiable et une méthode de vérification. Pour aller plus loin, combinez-le avec responsive design avec Claude Code, design system avec Claude Code et accessibilité avec Claude Code.

Les références officielles à garder ouvertes sont MDN : concepts de base Flexbox, flex, gap, ainsi que CSS Flexible Box Layout Module Level 1. Elles servent de base lorsque Claude Code propose un raccourci CSS ou une règle d’alignement à valider.

flowchart LR
  A["Besoin UI réel"] --> B["Flex container"]
  B --> C["main axis"]
  B --> D["cross axis"]
  C --> E["gap / flex / wrap"]
  D --> F["align-items / min-width"]
  E --> G["nav, cartes, formulaires, CTA"]
  F --> G

Les notions à fixer avant de générer

L’élément avec display: flex est le conteneur flex. Ses enfants directs sont les items flex. L’axe principal est la direction du flux : horizontal avec flex-direction: row, vertical avec column. L’axe croisé est perpendiculaire. justify-content distribue sur l’axe principal, tandis que align-items aligne sur l’axe croisé.

gap définit l’espace entre les items. C’est plus propre que de distribuer des marges sur chaque enfant, car le conteneur possède l’espacement et le passage à la ligne reste prévisible. flex-wrap: wrap autorise les items à passer sur une autre ligne quand la largeur manque.

Le raccourci flex: 1 1 220px signifie que l’item démarre avec une base de 220px, peut grandir si l’espace existe et peut rétrécir si nécessaire. Il convient aux cartes et aux champs de formulaire. Il convient moins aux logos, icônes et petits boutons, qui doivent souvent rester en flex: 0 0 auto.

La déclaration souvent oubliée est min-width: 0. Un item flex peut refuser de devenir plus étroit que son contenu. Avec un slug, une URL ou un titre long, toute la page peut créer un scroll horizontal. Ajoutez min-width: 0 sur l’item et overflow-wrap: anywhere sur le texte long.

Prompt pour Claude Code

Implémente avec Flexbox une navigation responsive, une rangée de cartes, un formulaire d'inscription et un bloc CTA final.
Respecte les conventions de classes existantes et conserve les liens CTA principaux.
En desktop, utilise des lignes horizontales ; sous 720px, empile uniquement les zones nécessaires.
Utilise gap pour les espacements, sépare les groupes de liens et les groupes de CTA en conteneurs flex.
Ajoute min-width: 0 et overflow-wrap quand un titre long, une URL ou un email peut déborder.
Retourne du HTML et du CSS copiables, puis vérifie 360px, 720px et 1024px pour le scroll horizontal.

La précision “uniquement les zones nécessaires” évite de transformer tout l’écran mobile en colonne sans hiérarchie. La marque peut rester visible, le groupe de liens peut passer à la ligne, et le CTA peut conserver sa taille tactile. Claude Code doit connaître ces priorités pour produire un résultat révisable.

Use case 1: navigation responsive

La navigation est le Use case le plus évident. Marque, liens et CTA partagent une ligne, mais leurs contraintes diffèrent. La marque ne doit pas rétrécir. Les liens peuvent passer à la ligne. Le CTA doit rester lisible et cliquable. Un simple justify-content: space-between sur tout le header devient fragile dès que les liens changent.

Le pattern plus robuste consiste à imbriquer Flexbox. Le header organise marque, groupe de liens et CTA. Le groupe de liens est lui-même un conteneur flex avec flex-wrap. Ainsi, on peut demander à Claude Code de laisser seulement les liens se replier, tout en protégeant le bouton principal.

Sur ClaudeCodeLab, ces liens orientent vers les produits Claude Code ou vers la formation et consultation. Si le CTA disparaît en mobile, l’article reste lisible mais le parcours de conversion est cassé.

Use case 2: cartes d’articles, de prix et de fonctionnalités

Les cartes fonctionnent très bien avec Flexbox lorsqu’elles sont peu nombreuses. Articles liés, offres, fonctionnalités et cas clients peuvent utiliser flex: 1 1 220px. Chaque carte part d’une base claire, grandit quand l’espace le permet et descend à la ligne quand il manque.

CSS Grid est préférable pour une matrice stricte ou un catalogue dense. Mais si l’objectif est une rangée de deux à quatre cartes qui se replie proprement, Flexbox est plus simple à lire et plus facile à faire modifier par Claude Code.

La vérification doit utiliser du contenu réaliste. Un titre court ne suffit pas. Testez une chaîne longue, une traduction plus longue et une adresse email. Sans min-width: 0, une carte peut pousser le viewport. Avec overflow-wrap, elle reste dans ses limites.

Use case 3: formulaires courts et recherche

Un formulaire court mélange label, input et bouton. L’input doit prendre l’espace restant, le bouton doit garder une taille confortable, et en mobile l’ensemble doit s’empiler. Pour une newsletter, une recherche ou un téléchargement de PDF, un bouton écrasé fait perdre des inscriptions.

Un bon point de départ est input { flex: 1 1 16rem; min-width: 12rem; } et button { flex: 0 0 auto; }. Le formulaire reçoit flex-wrap: wrap. Si l’espace manque, le bouton passe à la ligne au lieu de rendre l’input inutilisable.

Demandez aussi à Claude Code de préserver la sémantique HTML. label for doit correspondre à input id, l’email doit utiliser type="email", les champs obligatoires doivent avoir required, et le focus visible doit rester présent.

Use case 4: CTA de fin d’article

Le CTA final contient souvent une courte explication et deux actions. Flexbox permet au texte de prendre l’espace disponible et au groupe d’actions de gérer ses boutons. En mobile, l’ordre de lecture reste naturel : explication, puis actions. Pour ce site, les lecteurs autonomes peuvent aller vers les produits, tandis que les équipes peuvent réserver une formation.

Le Pitfall fréquent consiste à centrer tout le contenu dans un bloc très publicitaire. Après un article technique, un bloc calme et clair fonctionne mieux : texte d’un côté, actions de l’autre, puis empilement propre sur petit écran.

HTML copiable

<main class="flex-demo">
  <nav class="site-nav" aria-label="Primary">
    <a class="site-nav__brand" href="/fr/">ClaudeCodeLab</a>
    <div class="site-nav__links">
      <a href="/fr/blog/claude-code-responsive-design/">Responsive</a>
      <a href="/fr/blog/claude-code-design-system/">Design System</a>
      <a href="/fr/blog/claude-code-accessibility/">Accessibilité</a>
    </div>
    <a class="site-nav__cta" href="/fr/training/">Réserver</a>
  </nav>

  <section class="card-row" aria-label="Use cases">
    <article class="feature-card">
      <h2>Navigation</h2>
      <p>La marque reste stable, les liens se replient et le CTA garde une taille tactile.</p>
      <a href="/fr/blog/claude-code-responsive-design/">Lire le guide</a>
    </article>
    <article class="feature-card">
      <h2>Cards</h2>
      <p>Les cartes partent d'une base claire et les textes longs restent dans le cadre.</p>
      <a href="/fr/products/">Voir les produits</a>
    </article>
    <article class="feature-card">
      <h2>Forms</h2>
      <p>L'input utilise l'espace libre et le bouton reste utilisable en mobile.</p>
      <a href="/fr/training/">Demander de l'aide</a>
    </article>
  </section>

  <form class="signup-form" action="/fr/thanks/" method="post">
    <label for="email">Recevoir la checklist gratuite</label>
    <input id="email" name="email" type="email" placeholder="you@example.com" required />
    <button type="submit">Télécharger</button>
  </form>
</main>

CSS copiable

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #172026;
  background: #f6f8fb;
}

.flex-demo {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 48px;
}

.site-nav,
.site-nav__links,
.card-row,
.signup-form {
  display: flex;
  gap: 16px;
}

.site-nav {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.site-nav__brand,
.site-nav__cta,
.signup-form button {
  flex: 0 0 auto;
}

.site-nav__links {
  flex: 1 1 420px;
  justify-content: center;
  flex-wrap: wrap;
  min-width: 0;
}

.card-row {
  flex-wrap: wrap;
}

.feature-card {
  flex: 1 1 220px;
  min-width: 0;
  padding: 20px;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  background: #fff;
}

.feature-card p {
  overflow-wrap: anywhere;
}

.signup-form {
  align-items: end;
  flex-wrap: wrap;
  padding: 20px;
  border-radius: 8px;
  background: #e8f5f3;
}

.signup-form label {
  flex: 1 1 180px;
  font-weight: 700;
}

.signup-form input {
  flex: 1 1 16rem;
  min-width: 12rem;
  min-height: 44px;
}

.signup-form button,
.site-nav__cta {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  padding: 0 14px;
  color: #fff;
  background: #0f766e;
  font-weight: 700;
}

@media (max-width: 720px) {
  .site-nav,
  .signup-form {
    align-items: stretch;
  }

  .site-nav__links {
    justify-content: flex-start;
  }

  .site-nav__cta,
  .signup-form button {
    width: 100%;
  }
}

Pitfall et vérification

Premier Pitfall : appliquer flex: 1 partout. Les cartes et inputs peuvent grandir, mais un logo ou un bouton court devient étrange. Deuxième Pitfall : oublier min-width: 0, puis découvrir le scroll horizontal avec un titre long. Troisième Pitfall : gérer l’espace avec des marges enfants au lieu de gap. Quatrième Pitfall : utiliser order sans tester l’ordre clavier.

Vérifiez la syntaxe, les noms de classes et les accolades CSS. Testez ensuite 360px, 720px et 1024px. Cherchez scroll horizontal, bouton écrasé, input illisible et CTA invisible. Pour finir, demandez à Claude Code une revue dédiée aux risques d’overflow, d’accessibilité et de règles inutiles.

Résultat vérifié

J’ai collé le HTML et le CSS dans une page locale et vérifié les trois largeurs. Les cartes passent de trois colonnes à deux puis à une, sans scroll horizontal. Avec un titre volontairement long, min-width: 0 et overflow-wrap: anywhere empêchent la carte d’élargir le viewport. Pour des modèles réutilisables, voir les produits Claude Code. Pour une adoption en équipe ou une revue UI, voir formation et consultation.