Claude Code Flexbox Patterns: स्थिर UI Layout Guide

Flexbox एक दिशा वाले UI के लिए सबसे उपयोगी है

Flexbox CSS का layout model है जो elements को एक मुख्य दिशा में जमाता है: row या column। Practical UI में इसका मतलब navigation bar, button group, article cards, search bar, signup form, toolbar और article के अंत का CTA block है। अगर आपको rows और columns दोनों को strict तरीके से control करना है, तो CSS Grid बेहतर हो सकता है। लेकिन अगर समस्या एक line की है जिसे align, grow, shrink और wrap करना है, तो Flexbox तेज और readable रहता है।

Claude Code Flexbox code जल्दी बना देता है, पर prompt साफ होना चाहिए। अगर आप सिर्फ “responsive बना दो” लिखते हैं, तो desktop पर layout ठीक दिख सकता है और 360px mobile पर horizontal scroll आ सकता है। लंबा title card को बाहर धकेल सकता है। email input इतना छोटा हो सकता है कि user पढ़ न पाए। consultation button दो lines में टूट सकता है। ये real site वाली problems हैं, demo वाली नहीं।

इस guide में basic terms, reusable prompt, चार Use case sections, common Pitfall, copy-paste HTML/CSS और review checklist है। Related topics के लिए Claude Code responsive design, Claude Code design system और Claude Code accessibility देखें।

Official reference के लिए MDN के Flexbox basic concepts, flex, gap और CSS Flexible Box Layout Module Level 1 useful हैं। Claude Code के generated CSS को approve करते समय इन्हें baseline बनाएं।

flowchart LR
  A["Real UI need"] --> 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, CTA"]
  F --> G

पहले ये terms clear करें

जिस parent पर display: flex लगता है, उसे flex container कहते हैं। उसके direct children flex items होते हैं। main axis वह direction है जिसमें items flow करते हैं। flex-direction: row में यह horizontal होता है, column में vertical। cross axis main axis के perpendicular होती है। justify-content main axis पर spacing control करता है, और align-items cross axis पर alignment control करता है।

gap items के बीच का space है। हर child पर अलग margin लगाने से बेहतर है कि spacing parent पर रहे। इससे wrap होने पर भी gaps predictable रहते हैं। flex-wrap: wrap बताता है कि width कम होने पर items next line में जा सकते हैं। Mobile layout में horizontal scroll रोकने के लिए यह बहुत काम आता है।

flex: 1 1 220px का मतलब है: item 220px basis से शुरू हो, extra space मिले तो grow करे, कम जगह हो तो shrink करे। यह cards और inputs के लिए अच्छा है। Logo, icon और छोटे buttons को अक्सर flex: 0 0 auto रखना चाहिए ताकि वे अपने content जितनी width रखें।

एक छोटी लेकिन important rule है min-width: 0। Flex item कभी-कभी अपने content से छोटा नहीं होना चाहता। लंबा URL, email, product slug या translated title card को viewport से बाहर ले जा सकता है। Item पर min-width: 0 और text पर overflow-wrap: anywhere इस problem को रोकते हैं।

Claude Code prompt

Flexbox से responsive navigation, card row, signup form और article-end CTA बनाइए।
Existing class naming और primary CTA links preserve रखें।
Desktop पर horizontal rows रखें; 720px से नीचे सिर्फ जरूरत वाली जगह stack करें।
Spacing के लिए gap use करें, links group और CTA group को अलग flex containers बनाएं।
Long title, URL या email overflow न करे, इसलिए min-width: 0 और overflow-wrap add करें।
Copy-paste HTML/CSS दें और 360px, 720px, 1024px पर horizontal scroll check करें।

“सिर्फ जरूरत वाली जगह stack करें” बहुत जरूरी है। Mobile support का मतलब हर चीज को लंबी single column में बदलना नहीं है। Navigation में brand visible रह सकता है, links wrap कर सकते हैं, और CTA button अपनी priority रख सकता है। Claude Code को यह hierarchy बतानी पड़ती है।

Use case 1: responsive navigation

Navigation सबसे common Use case है। Brand, links और CTA एक ही row में होते हैं, पर उनका behavior अलग होता है। Brand shrink नहीं होना चाहिए। Links wrap कर सकते हैं। CTA tappable height रखे। अगर पूरे header पर सिर्फ justify-content: space-between लगा दिया, तो links बढ़ते ही layout fragile हो जाता है।

Better pattern nested Flexbox है। Header brand, link group और CTA को manage करता है। Link group खुद flex container होता है और flex-wrap लेता है। इससे आप Claude Code से साफ कह सकते हैं कि only links wrap करें और CTA stable रहे।

ClaudeCodeLab में ये CTA readers को Claude Code products या training और consulting की तरफ भेजते हैं। अगर mobile पर button गायब हो गया, तो article पढ़ने योग्य है, लेकिन conversion path टूट गया।

Use case 2: cards

Article cards, pricing cards, feature cards और case summaries के लिए Flexbox अच्छा है, खासकर जब cards दो से चार हों। flex: 1 1 220px card को 220px base देता है। Space हो तो card grow करता है, space कम हो तो अगली line में चला जाता है।

अगर strict catalog grid चाहिए तो CSS Grid बेहतर है। लेकिन simple card row के लिए Flexbox maintain करना आसान है और Claude Code भी इसे safely modify कर सकता है।

Review करते समय short dummy title काफी नहीं है। Long English service name, URL-like slug और email डालकर देखें। अगर min-width: 0 नहीं है, तो card viewport को push कर सकता है। Text पर overflow-wrap होने से content card के अंदर रहता है।

Use case 3: forms और search

Short forms में label, input और button साथ आते हैं। Input को remaining space चाहिए, button को comfortable size चाहिए, और mobile पर stack होना चाहिए। Newsletter signup, PDF download, search या coupon input में crushed button conversion कम कर सकता है।

Practical default है: input के लिए flex: 1 1 16rem; min-width: 12rem; और button के लिए flex: 0 0 auto। Form पर flex-wrap: wrap लगाएं। Width कम होने पर button next line में जाएगा, input unreadable नहीं बनेगा।

Semantic HTML भी रखें। label for और input id match हों। Email field में type="email" हो। Required field में required हो। Focus style न हटाएं। Flexbox layout देता है, accessibility नहीं।

Use case 4: article CTA

Article के अंत में CTA block में short explanation और दो actions होते हैं। Flexbox text block को available space देता है और button group को खुद wrap करने देता है। Self-serve readers products पर जा सकते हैं, और team rollout के लिए training सही path है।

यहां common Pitfall है कि सब कुछ center करके बड़ा ad-like block बना दिया जाता है। Technical article के बाद शांत, clear next step बेहतर है: पहले text, फिर actions, और mobile पर वही reading order।

Copy-paste HTML

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

  <section class="card-row" aria-label="Use cases">
    <article class="feature-card">
      <h2>Navigation</h2>
      <p>Brand stable रहता है, links wrap करते हैं और CTA tappable रहता है।</p>
      <a href="/hi/blog/claude-code-responsive-design/">Guide पढ़ें</a>
    </article>
    <article class="feature-card">
      <h2>Cards</h2>
      <p>Cards clear basis से grow करते हैं और long text अंदर wrap होता है।</p>
      <a href="/hi/products/">Products देखें</a>
    </article>
    <article class="feature-card">
      <h2>Forms</h2>
      <p>Input free space लेता है और button mobile पर usable रहता है।</p>
      <a href="/hi/training/">Help लें</a>
    </article>
  </section>

  <form class="signup-form" action="/hi/thanks/" method="post">
    <label for="email">Free checklist पाएं</label>
    <input id="email" name="email" type="email" placeholder="you@example.com" required />
    <button type="submit">Download</button>
  </form>
</main>

Copy-paste 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 और verification

पहला Pitfall है हर item पर flex: 1 लगाना। Cards और inputs grow कर सकते हैं, लेकिन brand और buttons नहीं। दूसरा Pitfall है min-width: 0 भूलना, जिससे long text horizontal scroll बना देता है। तीसरा Pitfall है spacing को child margins से manage करना; wrap के बाद gaps खराब दिखते हैं। चौथा Pitfall है order से visual order बदलना पर keyboard order न जांचना।

Verification में पहले HTML tags, CSS braces और class names देखें। फिर 360px, 720px और 1024px widths पर horizontal scroll, crushed buttons, unreadable inputs और hidden CTA check करें। अंत में Claude Code से reviewer mode में पूछें: overflow risk, accessibility risk और unnecessary CSS कौन से हैं?

Tested result

मैंने HTML और CSS को local page में paste करके तीन widths check किए। Cards desktop पर एक row, medium width पर दो rows और mobile पर single column बने। Long title डालने पर भी min-width: 0 और overflow-wrap: anywhere ने horizontal scroll रोका। Reusable prompts और templates के लिए Claude Code products देखें। Team rollout, review rules और training के लिए Claude Code training देखें।