Claude Code Flexbox Patterns für stabile UI-Layouts

Flexbox löst UI-Probleme auf einer Achse

Flexbox ist das CSS-Modell für Elemente, die in einer Richtung angeordnet werden: als Zeile oder als Spalte. In echten Oberflächen betrifft das Navigationen, Button-Gruppen, Artikelkarten, Suchleisten, kurze Formulare, Toolbars und CTA-Bereiche am Ende eines Artikels. CSS Grid ist besser, wenn Zeilen und Spalten gleichzeitig streng kontrolliert werden müssen. Flexbox ist meist klarer, wenn eine einzelne UI-Zeile ausgerichtet, gestreckt, verkleinert und bei Bedarf umgebrochen werden soll.

Claude Code kann solchen CSS-Code schnell schreiben, braucht aber präzise Grenzen. Die Bitte “mach es responsive” reicht selten. Das Ergebnis kann auf dem Desktop gut aussehen und bei 360px trotzdem horizontal scrollen. Ein langer Titel kann eine Karte verbreitern, eine E-Mail-Adresse kann ein Eingabefeld unlesbar machen, ein Beratungs-Button kann in zwei Zeilen umbrechen. Diese Fehler entstehen nicht in Spielzeugbeispielen, sondern in veröffentlichten Seiten mit echten Texten.

Dieser Leitfaden enthält die wichtigsten Begriffe, einen wiederverwendbaren Prompt, vier Use case Abschnitte, typische Pitfall Beispiele, kopierbares HTML/CSS und eine Review-Checkliste. Für den größeren Kontext passen dazu Responsive Design mit Claude Code, Designsysteme mit Claude Code und Accessibility mit Claude Code.

Offizielle Referenzen für die Prüfung sind MDN: Basic concepts of Flexbox, die flex Property, die gap Property und CSS Flexible Box Layout Module Level 1. Nutze sie, wenn Claude Code einen Shorthand oder eine Alignment-Regel erzeugt, die du belastbar prüfen willst.

flowchart LR
  A["Echte UI-Anforderung"] --> B["Flex container"]
  B --> C["main axis"]
  B --> D["cross axis"]
  C --> E["gap / flex / wrap"]
  D --> F["align-items / min-width"]
  E --> G["Navigation, Karten, Formulare, CTA"]
  F --> G

Begriffe, die der Prompt festlegen sollte

Das Element mit display: flex ist der Flex Container. Seine direkten Kinder sind Flex Items. Die Hauptachse ist die Richtung, in der die Items fließen: horizontal mit flex-direction: row, vertikal mit column. Die Querachse steht senkrecht dazu. justify-content verteilt auf der Hauptachse, align-items richtet auf der Querachse aus.

gap definiert den Abstand zwischen Items. Das ist robuster als Margins auf jedem Kind, weil der Container den Abstand verwaltet und Umbrüche sauberer bleiben. flex-wrap: wrap erlaubt eine neue Zeile, wenn die Breite nicht reicht. Ohne Wrap erzeugen Linkleisten und Kartenreihen auf Mobilgeräten schnell horizontalen Scroll.

flex: 1 1 220px bedeutet: Starte mit einer Basis von 220px, wachse bei freiem Platz und schrumpfe bei Bedarf. Das ist gut für Karten und Inputs. Logos, Icons und kurze Buttons sollten dagegen meist flex: 0 0 auto bleiben, damit sie ihre natürliche Breite behalten.

Die oft vergessene Regel ist min-width: 0. Ein Flex Item schrumpft nicht immer unter seine Inhaltsbreite. Lange Slugs, URLs, E-Mail-Adressen oder übersetzte Überschriften können die gesamte Seite verbreitern. Setze min-width: 0 auf das Item und overflow-wrap: anywhere auf lange Texte.

Prompt für Claude Code

Implementiere mit Flexbox eine responsive Navigation, eine Kartenreihe, ein Signup-Formular und einen CTA-Bereich am Artikelende.
Behalte bestehende Klassennamen-Konventionen und die wichtigsten CTA-Links bei.
Desktop nutzt horizontale Reihen; unter 720px sollen nur die notwendigen Bereiche stapeln.
Nutze gap für Abstände, trenne Linkgruppen und CTA-Gruppen in eigene Flex Container und vermeide Margin-Hacks.
Füge min-width: 0 und overflow-wrap dort hinzu, wo lange Titel, URLs oder E-Mail-Adressen überlaufen können.
Gib kopierbares HTML und CSS zurück und prüfe 360px, 720px und 1024px auf horizontalen Scroll.

“Nur die notwendigen Bereiche stapeln” ist wichtig. Mobile Unterstützung bedeutet nicht, die gesamte Oberfläche in eine lange Spalte zu verwandeln. Die Marke kann sichtbar bleiben, Links dürfen umbrechen, der CTA behält seine Priorität. Claude Code muss wissen, welche Teile flexibel sind und welche stabil bleiben.

Use case 1: Responsive Navigation

Navigation ist der klassische Use case. Marke, Links und CTA stehen in einer Zeile, haben aber unterschiedliche Aufgaben. Die Marke darf nicht schrumpfen. Links können umbrechen. Der CTA muss groß genug bleiben. Ein einzelnes justify-content: space-between auf dem Header ist fragil, sobald Links hinzukommen oder Übersetzungen länger werden.

Der stabilere Ansatz ist verschachteltes Flexbox. Der Header ordnet Marke, Linkgruppe und CTA. Die Linkgruppe ist selbst ein Flex Container mit flex-wrap. So kann Claude Code genau steuern, dass nur die Links umbrechen und der Button stabil bleibt.

Auf ClaudeCodeLab führen solche Links zu Claude Code Produkten oder zu Training und Beratung. Wenn der CTA auf Mobilgeräten verschwindet, ist die Seite zwar lesbar, aber der Umsatzpfad ist beschädigt. Navigation muss daher wie Interface und Funnel zugleich geprüft werden.

Use case 2: Karten für Artikel, Preise und Features

Karten sind ein guter Use case, wenn es um wenige Elemente geht: verwandte Artikel, Preispläne, Feature-Zusammenfassungen oder Case Studies. Mit flex: 1 1 220px startet jede Karte mit einer sinnvollen Basis, wächst bei Platz und rutscht in die nächste Zeile, wenn es eng wird.

Für große, strenge Matrizen ist CSS Grid oft besser. Wenn du aber zwei bis vier Karten in einer Reihe brauchst, die ohne Scroll umbrechen, ist Flexbox einfacher zu lesen und leichter von Claude Code zu ändern.

Der Review muss mit realistischen Inhalten stattfinden. Ein kurzer Platzhalter beweist nichts. Teste einen langen deutschen Begriff, einen URL-ähnlichen Slug und eine E-Mail-Adresse. Ohne min-width: 0 kann eine Karte den Viewport verbreitern. Mit overflow-wrap bleibt der Inhalt im Rahmen.

Use case 3: Formulare und Suche

Kurze Formulare kombinieren Label, Input und Button. Das Input soll freien Platz nutzen, der Button soll seine komfortable Größe behalten, und auf Mobilgeräten soll die Gruppe sauber stapeln. Für Newsletter, Suche, PDF-Downloads und Gutscheincodes ist ein gequetschter Button direkt schlecht für die Conversion.

Ein guter Startpunkt ist input { flex: 1 1 16rem; min-width: 12rem; } und button { flex: 0 0 auto; }. Das Formular selbst bekommt flex-wrap: wrap. Bei wenig Platz rutscht der Button in die nächste Zeile, statt das Eingabefeld unlesbar zu machen.

Claude Code soll auch semantisches HTML behalten. label for muss zu input id passen, E-Mail-Felder nutzen type="email", Pflichtfelder required, und sichtbare Fokuszustände bleiben erhalten. Flexbox ist nur Layout, kein Ersatz für Accessibility.

Use case 4: CTA-Bereich am Artikelende

Ein CTA am Ende eines technischen Artikels enthält meist eine kurze Erklärung und zwei Aktionen. Flexbox lässt den Textblock wachsen, während die Button-Gruppe ihre eigene Umbruchlogik hat. Für diese Website ist die Aufteilung klar: Selbstlerner gehen zu products, Teams mit Rollout-Fragen zu training.

Der häufige Pitfall ist ein riesiger, zentrierter Werbeblock. Nach einem technischen Artikel funktioniert ein ruhiger Abschluss besser: Text zuerst, Aktionen daneben, auf Mobilgeräten in derselben Lesereihenfolge gestapelt.

Kopierbares HTML

<main class="flex-demo">
  <nav class="site-nav" aria-label="Primary">
    <a class="site-nav__brand" href="/de/">ClaudeCodeLab</a>
    <div class="site-nav__links">
      <a href="/de/blog/claude-code-responsive-design/">Responsive</a>
      <a href="/de/blog/claude-code-design-system/">Design System</a>
      <a href="/de/blog/claude-code-accessibility/">Accessibility</a>
    </div>
    <a class="site-nav__cta" href="/de/training/">Review buchen</a>
  </nav>

  <section class="card-row" aria-label="Use cases">
    <article class="feature-card">
      <h2>Navigation</h2>
      <p>Marke bleibt stabil, Links umbrechen und der CTA bleibt gut antippbar.</p>
      <a href="/de/blog/claude-code-responsive-design/">Guide lesen</a>
    </article>
    <article class="feature-card">
      <h2>Cards</h2>
      <p>Karten wachsen aus einer klaren Basis und lange Texte bleiben im Rahmen.</p>
      <a href="/de/products/">Produkte ansehen</a>
    </article>
    <article class="feature-card">
      <h2>Forms</h2>
      <p>Inputs nutzen freien Platz, Buttons bleiben auf Mobilgeräten bedienbar.</p>
      <a href="/de/training/">Hilfe anfragen</a>
    </article>
  </section>

  <form class="signup-form" action="/de/thanks/" method="post">
    <label for="email">Kostenlose Checkliste erhalten</label>
    <input id="email" name="email" type="email" placeholder="you@example.com" required />
    <button type="submit">Download</button>
  </form>
</main>

Kopierbares CSS

* {
  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 und Prüfung

Der erste Pitfall ist flex: 1 auf allem. Karten und Inputs dürfen wachsen, Marke und Buttons nicht. Der zweite Pitfall ist fehlendes min-width: 0, wodurch lange Inhalte horizontalen Scroll erzeugen. Der dritte Pitfall ist Abstand über Child-Margins statt gap. Der vierte Pitfall ist order, ohne Tastaturreihenfolge zu testen.

Prüfe zuerst Syntax, Klassennamen und CSS-Klammern. Danach teste 360px, 720px und 1024px. Suche nach horizontalem Scroll, gequetschten Buttons, unlesbaren Inputs und verschwundenen CTAs. Bitte Claude Code anschließend um eine Review auf Overflow-Risiken, Accessibility und überflüssige Regeln.

Verifiziertes Ergebnis

Ich habe HTML und CSS in eine lokale Seite eingefügt und die drei Breiten geprüft. Die Karten wechseln von drei Spalten zu zwei und dann zu einer, ohne horizontalen Scroll. Ein absichtlich langer Titel blieb mit min-width: 0 und overflow-wrap: anywhere innerhalb der Karte. Wiederverwendbare Patterns gibt es in den Claude Code Produkten, Team-Rollout und UI-Reviews unter Training und Beratung.