Pola Flexbox Claude Code untuk Layout UI yang Stabil

Flexbox cocok untuk masalah UI satu arah

Flexbox adalah model layout CSS untuk menyusun elemen dalam satu arah utama: baris atau kolom. Dalam pekerjaan UI sehari-hari, ini berarti navigation bar, grup tombol, kartu artikel, search bar, form signup, toolbar, dan CTA di akhir artikel. CSS Grid lebih cocok saat kamu harus mengontrol baris dan kolom sekaligus. Flexbox lebih mudah dibaca saat tugasnya adalah membuat satu deret elemen tetap sejajar, bisa membesar, bisa mengecil, dan bisa pindah baris tanpa membuat scroll horizontal.

Claude Code bisa menulis Flexbox dengan cepat, tetapi prompt harus jelas. Jika instruksi hanya berbunyi “buat responsive”, hasilnya mungkin terlihat baik di desktop tetapi rusak di lebar 360px. Judul panjang dapat mendorong kartu keluar dari viewport. Email panjang dapat membuat input terlalu sempit. Tombol konsultasi dapat pecah menjadi dua baris dan kehilangan prioritas. Masalah seperti ini muncul saat halaman memakai copy, terjemahan, dan link bisnis yang nyata.

Panduan ini merangkum istilah dasar, prompt yang bisa dipakai ulang, empat bagian Use case, daftar Pitfall, HTML/CSS siap pakai, dan checklist review. Untuk konteks lebih luas, baca juga responsive design dengan Claude Code, design system dengan Claude Code, dan accessibility dengan Claude Code.

Referensi resmi yang sebaiknya dibuka saat review adalah MDN: basic concepts of Flexbox, properti flex, properti gap, serta CSS Flexible Box Layout Module Level 1. Gunakan referensi ini untuk memeriksa output Claude Code, bukan hanya menilai dari tampilan sekilas.

flowchart LR
  A["Kebutuhan UI nyata"] --> 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

Istilah yang harus jelas sejak prompt

Elemen dengan display: flex disebut flex container. Anak langsungnya disebut flex item. Main axis adalah arah aliran item: horizontal dengan flex-direction: row, vertikal dengan column. Cross axis adalah arah yang tegak lurus. justify-content mengatur distribusi di main axis, sedangkan align-items mengatur perataan di cross axis.

gap adalah jarak antar item. Ini lebih rapi dibanding menaruh margin di setiap child, karena spacing dimiliki oleh container dan tetap konsisten saat item pindah baris. flex-wrap: wrap mengizinkan item turun ke baris berikutnya saat lebar tidak cukup. Tanpa wrap, deretan link atau kartu mudah menimbulkan scroll horizontal di mobile.

flex: 1 1 220px berarti item dimulai dari basis 220px, boleh tumbuh saat ada ruang, dan boleh mengecil saat ruang terbatas. Ini cocok untuk kartu dan input. Logo, ikon, dan tombol pendek biasanya harus menjaga ukuran kontennya dengan flex: 0 0 auto.

Deklarasi kecil yang sering menyelamatkan layout adalah min-width: 0. Flex item tidak selalu mau mengecil di bawah lebar kontennya. URL, email, slug, atau judul terjemahan yang panjang dapat mendorong halaman melebar. Tambahkan min-width: 0 pada item dan overflow-wrap: anywhere pada teks panjang.

Prompt untuk Claude Code

Implementasikan navigation responsive, baris kartu, form signup, dan CTA akhir artikel dengan Flexbox.
Pertahankan pola nama class yang ada dan link CTA utama.
Desktop memakai baris horizontal; di bawah 720px, stack hanya bagian yang memang perlu.
Gunakan gap untuk spacing, pisahkan grup link dan grup CTA sebagai flex container sendiri, hindari hack margin.
Tambahkan min-width: 0 dan overflow-wrap untuk judul panjang, URL, atau email yang bisa overflow.
Kembalikan HTML dan CSS yang bisa langsung dicopy, lalu review 360px, 720px, dan 1024px untuk horizontal scroll.

Kalimat “stack hanya bagian yang memang perlu” penting. Mobile layout tidak harus membuat semua elemen menjadi satu kolom panjang. Brand bisa tetap terlihat, link bisa wrap, dan CTA bisa tetap memiliki prioritas. Claude Code perlu diberi hierarki ini agar hasilnya mudah direview.

Use case 1: navigasi responsive

Navigasi adalah Use case paling umum. Brand, link, dan CTA berada dalam satu baris, tetapi perilakunya berbeda. Brand tidak boleh mengecil. Link boleh wrap. CTA harus tetap mudah disentuh. Jika seluruh header hanya bergantung pada justify-content: space-between, layout akan rapuh saat link bertambah atau teks diterjemahkan lebih panjang.

Pola yang lebih aman adalah Flexbox bertingkat. Header mengatur brand, grup link, dan CTA. Grup link juga menjadi flex container dengan flex-wrap. Dengan begitu kamu bisa meminta Claude Code agar hanya link yang wrap, sementara tombol utama tetap stabil.

Di ClaudeCodeLab, link seperti ini mengarah ke produk Claude Code atau training dan konsultasi. Jika CTA hilang di mobile, artikel masih bisa dibaca, tetapi jalur konversi sudah putus.

Use case 2: kartu artikel, harga, dan fitur

Kartu adalah Use case yang kuat saat jumlah item sedikit: artikel terkait, paket harga, ringkasan fitur, atau studi kasus. Dengan flex: 1 1 220px, setiap kartu mulai dari basis yang jelas, tumbuh saat ada ruang, dan pindah baris saat ruang tidak cukup.

Untuk katalog besar atau matriks yang ketat, CSS Grid bisa lebih tepat. Namun untuk dua sampai empat kartu yang perlu sejajar dan wrap secara alami, Flexbox lebih mudah dibaca dan lebih aman untuk dimodifikasi oleh Claude Code.

Review harus memakai konten realistis. Jangan hanya menguji dengan judul pendek. Masukkan service name yang panjang, slug seperti claude-code-flexbox-patterns-long-example, dan email. Tanpa min-width: 0, satu kartu bisa mendorong viewport. Dengan overflow-wrap, teks tetap berada di dalam kartu.

Use case 3: form dan pencarian

Form pendek menggabungkan label, input, dan tombol. Input harus memakai ruang tersisa, tombol harus menjaga ukuran yang nyaman, dan di mobile form harus stack dengan rapi. Untuk newsletter, pencarian, download PDF, atau kupon, tombol yang terjepit akan merusak pengalaman dan konversi.

Default praktisnya adalah input { flex: 1 1 16rem; min-width: 12rem; } dan button { flex: 0 0 auto; }. Form memakai flex-wrap: wrap. Saat lebar tidak cukup, tombol turun ke baris berikutnya tanpa membuat input terlalu kecil.

Minta Claude Code menjaga HTML semantik. label for harus cocok dengan input id, email memakai type="email", field wajib memakai required, dan focus style tidak dihapus. Flexbox mengatur layout, tetapi form produksi juga harus bisa dipakai dengan keyboard.

Use case 4: CTA akhir artikel

CTA akhir artikel biasanya berisi penjelasan singkat dan dua aksi. Flexbox membuat blok teks memakai ruang yang tersedia, sementara grup tombol mengatur wrap sendiri. Di situs ini, pembaca mandiri bisa masuk ke products, sedangkan tim yang butuh rollout dan review bisa masuk ke training.

Pitfall yang sering terjadi adalah menaruh semua isi di tengah dan membuat blok terasa seperti iklan besar. Setelah artikel teknis, penutup yang tenang lebih efektif: teks dulu, aksi di samping, lalu stack dengan urutan baca yang sama di mobile.

HTML siap pakai

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

  <section class="card-row" aria-label="Use cases">
    <article class="feature-card">
      <h2>Navigation</h2>
      <p>Brand tetap stabil, link bisa wrap, dan CTA tetap mudah disentuh.</p>
      <a href="/id/blog/claude-code-responsive-design/">Baca panduan</a>
    </article>
    <article class="feature-card">
      <h2>Cards</h2>
      <p>Kartu tumbuh dari basis yang jelas dan teks panjang tetap berada di dalam.</p>
      <a href="/id/products/">Lihat produk</a>
    </article>
    <article class="feature-card">
      <h2>Forms</h2>
      <p>Input memakai ruang kosong dan tombol tetap nyaman di mobile.</p>
      <a href="/id/training/">Minta bantuan</a>
    </article>
  </section>

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

CSS siap pakai

* {
  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 dan verifikasi

Pitfall pertama adalah memakai flex: 1 di semua item. Kartu dan input boleh tumbuh, tetapi brand dan tombol tidak. Pitfall kedua adalah lupa min-width: 0, sehingga teks panjang membuat scroll horizontal. Pitfall ketiga adalah spacing memakai margin child, bukan gap. Pitfall keempat adalah mengubah visual order dengan order tanpa mengecek urutan keyboard.

Mulai review dari sintaks: tag HTML tertutup, kurung CSS seimbang, dan nama class cocok. Lalu cek 360px, 720px, dan 1024px. Cari scroll horizontal, tombol terjepit, input sulit dibaca, dan CTA yang hilang. Setelah itu, minta Claude Code bertindak sebagai reviewer untuk mencari risiko overflow, accessibility, dan deklarasi CSS yang tidak perlu.

Hasil yang diuji

Saya menempelkan HTML dan CSS di halaman lokal lalu memeriksa tiga lebar layar. Kartu berpindah dari tiga kolom ke dua lalu satu tanpa scroll horizontal. Saat judul panjang dimasukkan, min-width: 0 dan overflow-wrap: anywhere menjaga teks tetap di dalam kartu. Untuk pola dan prompt yang bisa dipakai ulang, lihat produk Claude Code. Untuk rollout tim dan review UI, lanjutkan ke training dan konsultasi.