Taman Bermain CSS Flexbox

Bangun dan debug tata letak flexbox secara visual dengan pratinjau waktu nyata, kontrol tingkat item, dan CSS siap ekspor untuk implementasi frontend yang lebih cepat.

CSS Flexbox Playground

Configure flex container behavior and per-item flex values visually, then export implementation-ready CSS and markup for responsive UI layouts.

Container Controls

flex-direction

flex-wrap

justify-content

align-items

align-content

gap (px)

padding (px)

Item Controls

Item 1

Label

flex-basis (px)

flex-grow

flex-shrink

Item 2

Label

flex-basis (px)

flex-grow

flex-shrink

Item 3

Label

flex-basis (px)

flex-grow

flex-shrink

Item 4

Label

flex-basis (px)

flex-grow

flex-shrink

Item 5

Label

flex-basis (px)

flex-grow

flex-shrink

Item 6

Label

flex-basis (px)

flex-grow

flex-shrink

Live Flex Preview

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Generated Flexbox CSS + Markup

.flex-layout {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 12px;
  padding: 12px;
}

.flex-layout__item {
  min-height: 72px;
  border-radius: 0.75rem;
  padding: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

<div className="flex-layout">
  <div className="flex-layout__item" style={{ flex: '2 1 180px' }}>
    Item 1
  </div>
  <div className="flex-layout__item" style={{ flex: '1 1 140px' }}>
    Item 2
  </div>
  <div className="flex-layout__item" style={{ flex: '1 1 140px' }}>
    Item 3
  </div>
  <div className="flex-layout__item" style={{ flex: '1 1 180px' }}>
    Item 4
  </div>
  <div className="flex-layout__item" style={{ flex: '1 1 140px' }}>
    Item 5
  </div>
  <div className="flex-layout__item" style={{ flex: '1 1 140px' }}>
    Item 6
  </div>
</div>

Flexbox Report

CSS Flexbox Playground Report
============================
Direction: row
Wrap: wrap
Justify Content: flex-start
Align Items: stretch
Align Content: stretch
Gap: 12px
Padding: 12px
Items: 6

1. Item 1 | flex: 2 1 180px
2. Item 2 | flex: 1 1 140px
3. Item 3 | flex: 1 1 140px
4. Item 4 | flex: 1 1 180px
5. Item 5 | flex: 1 1 140px
6. Item 6 | flex: 1 1 140px

Fitur

Kontrol Kontainer Penuh: Sesuaikan kombinasi arah, pembungkusan, spasi, dan perataan untuk mengeksplorasi perilaku tata letak fleksibel yang praktis untuk kartu, bilah alat, dan shell aplikasi.
Kontrol Fleksibel Per-Item: Sesuaikan pertumbuhan fleksibel, penyusutan fleksibel, dan basis fleksibel untuk setiap item secara independen untuk membuat prototipe perilaku distribusi nyata di bawah batasan area pandang yang berbeda.
Pratinjau Visual Interaktif: Amati rendering langsung saat mengedit nilai sehingga Anda dapat dengan cepat mengidentifikasi masalah penyelarasan, pembungkusan, dan jarak sebelum mengkodekan komponen akhir.
Cuplikan Siap Ekspor: Salin CSS dan struktur markup yang dihasilkan langsung ke proyek Anda, sehingga mengurangi coba-coba saat menerapkan tata letak fleksibel produksi.

Kasus Penggunaan

Bilah Navigasi: Prototipe pola navigasi horizontal dan terbungkus dengan jarak dan penyelarasan seimbang sebelum diintegrasikan ke dalam komponen header.
Panel Dasbor: Buat grup panel yang dapat diperkirakan meluas dan menyusut di seluruh ukuran area pandang dengan menyetel basis item, rasio pertambahan, dan penyusutan.
Daftar Kartu: Uji pembungkusan baris kartu dan tumpukan vertikal dengan cepat untuk memilih arah dan perilaku penyelarasan yang tepat untuk layar dengan banyak konten.
Sistem Tata Letak Formulir: Validasi bagaimana label, masukan, dan grup tindakan menyelaraskan dan membungkus batasan lebar untuk ergonomi formulir yang konsisten.
Tinjauan Desain: Bagikan prototipe fleksibel yang konkret selama peninjauan tim dan segera ekspor cuplikan kode yang cocok dengan perilaku tata letak yang disetujui.
Pelatihan Frontend: Tunjukkan bagaimana properti fleksibel berinteraksi secara real-time untuk sesi orientasi, lokakarya, dan debugging dengan pengembang junior.

Mengapa Ini Membantu

Flexbox sangat kuat tetapi sering kali memerlukan uji coba berulang kali di beberapa properti. Alat ini menjaga kontrol, pratinjau, dan kode yang dihasilkan tetap tersinkronisasi untuk iterasi tata letak yang lebih cepat.

Dari Prototipe hingga Produksi

Setelah menyetel nilai, Anda dapat menyalin cuplikan CSS dan markup ke dalam proyek Anda untuk mengurangi waktu penerapan dan mempertahankan maksud tata letak.

Pemrosesan Lokal Pribadi

Semuanya berjalan secara lokal di browser tanpa perlu mengunggah atau masuk, sehingga dapat diandalkan untuk eksperimen internal yang cepat dan alur kerja tim.

Pertanyaan yang Sering Diajukan

Anda dapat mengkonfigurasi flex-direction, flex-wrap, justify-content, align-items, align-content, gap, dan padding dari panel kontrol.

Ya. Setiap item mendukung nilai pertumbuhan fleksibel, penyusutan fleksibel, dan basis fleksibel sehingga Anda dapat memodelkan perilaku distribusi yang realistis.

Ya. Alat ini mengeluarkan CSS penampung ditambah cuplikan markup dan laporan tambahan untuk dokumentasi atau berbagi.

Ya. Anda dapat menambahkan item secara dinamis atau menghapus item terakhir untuk menguji berbagai ukuran konten dan kondisi pembungkusan.

Ya. Ini gratis, tidak memerlukan login, dan berjalan sepenuhnya di browser Anda.

align-items mengontrol perataan item lintas sumbu dalam satu baris. align-content mengontrol jarak antara beberapa baris ketika flex-wrap diaktifkan dan ada ruang ekstra pada sumbu silang.

Tidak. Ini 100% gratis tanpa perlu mendaftar. Semua pembuatan tata letak dan rendering pratinjau terjadi di sisi klien di browser Anda tanpa data yang dikirim ke server mana pun.