Claude Code Flexbox Patterns for Stable UI Layouts

Flexbox is for one-direction interface problems

Flexbox is the CSS layout model for arranging items in one direction at a time: a row or a column. In practical UI work, that means headers, button groups, cards, search bars, signup forms, toolbars, and article-end CTAs. CSS Grid is stronger when you must control rows and columns together. Flexbox is usually the faster, clearer option when you have one strip of interface that needs to align, wrap, and survive real content.

Claude Code can write Flexbox quickly, but it needs constraints. If the prompt only says “make this layout responsive”, the result may look acceptable on a wide desktop and fail at 360px. Long article titles can push cards wider than the viewport. Email inputs can become too narrow to read. A consultation button can wrap into two lines and look broken. These are not exotic edge cases; they are the exact cases that appear once the page has real copy, translated text, and revenue links.

Use this guide as a reviewable pattern for asking Claude Code to implement Flexbox safely. It covers beginner terminology, a prompt you can reuse, four practical Use case sections, common Pitfall examples, copy-paste HTML and CSS, and a verification checklist. For broader layout work, pair it with responsive design with Claude Code, design systems with Claude Code, and accessibility implementation.

Keep the official references open while reviewing generated code: MDN’s basic concepts of Flexbox, the flex property, the gap property, and the CSS Flexible Box Layout Module Level 1. The point is not to memorize the spec. The point is to have a reliable source when Claude Code chooses a shorthand or an alignment value you need to review.

flowchart LR
  A["UI requirement"] --> 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, cards, forms, CTAs"]
  F --> G

The terms Claude Code must respect

A flex container is the parent element with display: flex. Its direct children become flex items. The main axis is the direction the items flow: horizontal with flex-direction: row, vertical with flex-direction: column. The cross axis is the perpendicular direction. justify-content controls distribution on the main axis, while align-items controls alignment on the cross axis.

gap is the space between flex items. It is usually cleaner than giving every child a margin, because the parent owns the spacing and wrapping stays predictable. flex-wrap: wrap lets items move to another line when there is not enough room. Without wrapping, a row of links or cards can force horizontal scrolling on mobile.

The flex shorthand is powerful but easy to misuse. flex: 1 1 220px means the item starts from a 220px basis, can grow when space is available, and can shrink when needed. flex: 0 0 auto means the item should keep its content size. A common mistake is applying flex: 1 to everything. That can make logos, icons, and small buttons stretch in ways users do not expect.

The small declaration many people miss is min-width: 0. Flex items do not always shrink below their content. If a card contains a long slug, URL, or translated headline, the item may push the layout wider than the viewport. Adding min-width: 0 to the flex item and overflow-wrap: anywhere to long text gives the browser permission to wrap instead of creating horizontal scroll.

A prompt that produces reviewable Flexbox

Use a prompt that states the layout rules, the content risks, and the verification widths. This gives Claude Code a target that is testable instead of aesthetic.

Implement responsive navigation, a card row, a signup form, and an article CTA band with Flexbox.
Keep the existing class naming style and preserve the primary CTA links.
Desktop should use horizontal rows; screens below 720px should stack only where needed.
Use gap for spacing, split link groups and CTA groups into separate flex containers, and avoid margin hacks.
Add min-width: 0 and overflow-wrap where long titles, URLs, or email addresses can overflow.
Return copy-paste HTML and CSS, then review 360px, 720px, and 1024px widths for horizontal scroll.

The phrase “stack only where needed” matters. Mobile support does not mean every group should become a single column. A header can keep the brand and CTA visible while allowing the link group to wrap. A CTA band can keep two buttons side by side until they genuinely need another line. Claude Code needs that priority spelled out.

Masa’s practical lesson from using this pattern is simple: vague “responsive” prompts often produce media queries, but they do not necessarily test real content. Adding “long title”, “email address”, “CTA remains visible”, and “no horizontal scroll” to the prompt catches more failures before review.

Use case 1: responsive navigation

Navigation is the classic Flexbox Use case. A brand, a link group, and a CTA belong in one header, but they should not all behave the same. The brand should not shrink. The links can wrap. The CTA should remain easy to tap. Putting all three into one flex row with justify-content: space-between looks clean at first, but it becomes fragile when links are added or translated.

The safer pattern is nested Flexbox. The header is a flex container. The link group is another flex container. The CTA is a fixed-content item. This lets you tell Claude Code exactly which part may wrap and which part must stay stable. It also makes review easier because each group has a clear job.

On this site, the header and article CTAs often point readers to Claude Code products or Claude Code training and consulting. If a product link disappears on mobile, the page may still look technically usable, but the business path is broken. Review navigation as both interface and revenue infrastructure.

Use case 2: cards for articles, pricing, and features

Cards are another strong Flexbox Use case when you have a small number of items. Article teasers, product bundles, pricing tiers, and feature summaries often need two to four cards that share a row on desktop and wrap naturally on smaller screens. flex: 1 1 220px is a practical baseline: each card starts near 220px, grows into available space, and wraps when the row becomes too narrow.

CSS Grid is still the better tool for strict two-dimensional grids. If you need exact column counts, aligned rows across many items, or a product catalog with dense controls, Grid may be cleaner. But when the requirement is “make these cards line up and wrap without scroll”, Flexbox is readable and easy for Claude Code to modify.

The important review detail is content length. English service names, Japanese headings, German compound words, URL slugs, and coupon codes all behave differently. Do not approve the layout with only short placeholder text. Put a long title into one card and a long URL-like string into another. If the row stays inside the viewport, the pattern is robust enough for publication.

Use case 3: signup forms and search bars

Short forms benefit from Flexbox because they combine different kinds of elements: label, input, and button. The input should take remaining space. The button should keep its natural size. On mobile, the form should stack cleanly so the input is readable and the button remains tappable.

A good default is input { flex: 1 1 16rem; min-width: 12rem; } and button { flex: 0 0 auto; }. That tells the browser the input may stretch and shrink, but the button should not be crushed. Add flex-wrap: wrap to the form so narrow screens can move the button to the next line instead of squeezing everything into one row.

Claude Code should also preserve semantic HTML. The label should point to the input with matching for and id values. Email fields should use type="email". Required fields should use required. Focus rings should be visible. Flexbox handles layout, but a production form also needs keyboard and accessibility behavior.

Use case 4: article CTA bands

Article-end CTA bands are easy to underestimate. They often contain a short explanation, a primary product link, and a consulting or training link. Flexbox works well because the text block can take available space while the action group keeps button sizing predictable. On mobile, the text and buttons can stack in reading order.

For ClaudeCodeLab, a practical pattern is to send self-serve readers to products and teams to training. That split matters because the reader intent is different. Someone who wants a prompt pack needs a fast product path. Someone rolling out Claude Code across a team needs a review and governance path.

The layout rule is simple: keep the explanation and actions as separate flex items, let the text block shrink with min-width: 0, and let the buttons wrap inside their own action group. This avoids giant centered blocks that look like ads and instead creates a quiet, usable next step after the technical article.

Copy-paste HTML

Paste this into a page and pair it with the CSS in the next section. It uses real internal links, a product CTA, and a training CTA.

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

  <section class="intro-panel">
    <p class="eyebrow">Flexbox pattern</p>
    <h1>Build stable UI layouts with Claude Code</h1>
    <p>
      Use the same Flexbox rules for navigation, cards, forms, and CTAs so the
      layout stays readable on desktop and mobile screens.
    </p>
  </section>

  <section class="card-row" aria-label="Use cases">
    <article class="feature-card">
      <h2>Navigation</h2>
      <p>Logo, links, and CTA stay aligned while links wrap on narrow screens.</p>
      <a href="/en/blog/claude-code-responsive-design/">Read guide</a>
    </article>
    <article class="feature-card">
      <h2>Cards</h2>
      <p>Article, pricing, and feature cards grow from a clear basis and wrap without overflow.</p>
      <a href="/en/products/">View products</a>
    </article>
    <article class="feature-card">
      <h2>Forms</h2>
      <p>Inputs take remaining space, buttons stay tappable, and mobile layouts stack cleanly.</p>
      <a href="/en/training/">Get help</a>
    </article>
  </section>

  <form class="signup-form" action="/en/thanks/" method="post">
    <label for="email">Get the free checklist</label>
    <input id="email" name="email" type="email" placeholder="you@example.com" required />
    <button type="submit">Download</button>
  </form>

  <aside class="cta-band">
    <div>
      <p class="eyebrow">Next action</p>
      <h2>Turn Claude Code UI work into a repeatable system</h2>
      <p>Use products for copy-paste patterns and training when a team rollout needs review.</p>
    </div>
    <div class="cta-band__actions">
      <a href="/en/products/">View products</a>
      <a href="/en/training/">Book training</a>
    </div>
  </aside>
</main>

Copy-paste CSS

This CSS is intentionally plain. It uses no framework and can be dropped into a static HTML file.

* {
  box-sizing: border-box;
}

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

a {
  color: inherit;
  text-decoration: none;
}

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

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

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

.site-nav__brand {
  flex: 0 0 auto;
  font-weight: 800;
}

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

.site-nav__links a,
.site-nav__cta,
.feature-card a,
.signup-form button,
.cta-band__actions a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0 14px;
}

.site-nav__cta,
.signup-form button,
.cta-band__actions a:first-child {
  flex: 0 0 auto;
  color: #fff;
  background: #0f766e;
  font-weight: 700;
}

.intro-panel,
.feature-card,
.cta-band {
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  background: #fff;
}

.intro-panel {
  padding: 32px;
  margin: 18px 0;
}

.eyebrow {
  margin: 0 0 8px;
  color: #0f766e;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.intro-panel h1,
.cta-band h2 {
  margin: 0 0 12px;
}

.intro-panel p,
.feature-card p,
.cta-band p {
  overflow-wrap: anywhere;
}

.card-row {
  flex-wrap: wrap;
  margin: 18px 0;
}

.feature-card {
  flex: 1 1 220px;
  min-width: 0;
  padding: 20px;
}

.feature-card h2 {
  margin-top: 0;
}

.feature-card a {
  width: fit-content;
  margin-top: 8px;
  border: 1px solid #0f766e;
  color: #0f766e;
  font-weight: 700;
}

.signup-form {
  align-items: end;
  flex-wrap: wrap;
  margin: 20px 0;
  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;
  border: 1px solid #9fb3c8;
  border-radius: 8px;
  padding: 0 12px;
}

.signup-form button {
  border: 0;
  cursor: pointer;
}

.cta-band {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 24px;
}

.cta-band > div:first-child {
  flex: 1 1 360px;
  min-width: 0;
}

.cta-band__actions {
  flex: 0 1 320px;
  flex-wrap: wrap;
}

.cta-band__actions a {
  flex: 1 1 140px;
  border: 1px solid #0f766e;
  font-weight: 700;
}

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

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

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

Pitfall checklist

The first Pitfall is using flex: 1 everywhere. It is useful for cards and inputs, but it makes logos, icons, and short buttons stretch. Decide which items may grow and which items should keep their content width.

The second Pitfall is forgetting min-width: 0. If a card contains a long product name or URL, the browser may preserve the content width and force the page to scroll sideways. Add long test data before approving the layout.

The third Pitfall is spacing with child margins. Margins can leave strange gaps when the row wraps. Put spacing on the parent with gap, then use individual margins only for exceptions.

The fourth Pitfall is changing visual order with order without testing keyboard order. Screen readers and keyboard navigation still follow the DOM order. If the visual order differs from the reading order, the interface can become confusing even when it looks polished.

Review checklist

After Claude Code returns the implementation, check the syntax first: balanced tags, balanced CSS braces, and matching class names between HTML and CSS. Then test 360px, 720px, and 1024px widths. Look for horizontal scroll, crushed buttons, unreadable inputs, missing focus styles, and cards that become wider than the viewport.

Use this review table:

Area	What to check	Fix when it fails
Navigation	Brand, links, and CTA remain visible	Wrap only the link group and keep CTA flex: 0 0 auto
Cards	Long titles stay inside the card	Add min-width: 0 and overflow-wrap
Form	Input remains readable and button tappable	Let input flex, keep button content-sized, wrap the row
CTA	Product and training links stay visible	Split text and actions into separate flex items

For a second pass, ask Claude Code to review its own CSS for unnecessary declarations, accessibility risks, and mobile overflow. Treat that as a review step, not as blind approval.

What I verified

I pasted the sample into a local HTML page and checked 360px, 720px, and 1024px widths. The cards wrapped from three columns to two and then one without horizontal scroll. The form kept a readable input and a full-width button on narrow screens. A deliberately long title reproduced the card overflow issue, and the combination of min-width: 0 plus overflow-wrap: anywhere fixed it. For reusable prompts and templates, see Claude Code products. For team rollout, review rules, or UI implementation support, use training and consulting.