Tanah Main CSS Flexbox Penggalang CSS Flexbox visual dengan kontrol interaktif untuk semua properti wadah fleksibel.

🎨

Tanah Main CSS Flexbox

Penggalang CSS Flexbox visual dengan kontrol interaktif untuk semua properti wadah fleksibel.

Tetapkan properti kontainer flex

Pilih flex-direction, justify-content, align-items, flex-wrap, dan gap.

Sesuaikan item

Ubah jumlah item flex untuk melihat bagaimana tata letak beradaptasi.

Salin CSS

Pratinjau tata letak dan salin kode CSS kontainer flexbox.

Loading tool...

What Is Tanah Main CSS Flexbox?

CSS Flexbox Playground adalah alat interaktif untuk mempelajari dan bereksperimen dengan tata letak CSS Flexbox. Flexbox adalah metode tata letak satu dimensi untuk mengatur item dalam baris atau kolom, menyediakan kontrol penyesuaian dan distribusi yang kuat. Playground ini memungkinkan Anda untuk secara visual memanipulasi semua properti wadah fleksibel: flex-direction mengontrol sumbu utama, justify-content mendistribusikan ruang sepanjang sumbu utama, align-items menyelaraskan item pada sumbu silang, flex-wrap mengontrol pembungkus baris, dan gap menyetel spasi antara item. Pratinjau menampilkan item fleksibel berwarna dengan ketinggian yang bervariasi untuk secara jelas mendemonstrasikan bagaimana setiap properti mempengaruhi tata letak. Anda dapat menyesuaikan jumlah item untuk melihat bagaimana tata letak merespons jumlah konten yang berbeda.

Why Use Tanah Main CSS Flexbox?

Kontrol interaktif untuk semua properti kontainer flex
Pratinjau visual dengan item berwarna yang memiliki tinggi bervariasi
Jumlah item yang dapat disesuaikan untuk menguji fleksibilitas tata letak
Keluaran CSS yang bersih dan siap digunakan dalam produksi

Common Use Cases

Bilah Navigasi

Bangun tata letak navigasi yang fleksibel dengan item yang ditempatkan di tengah atau berjarak.

Grid Kartu

Buat tata letak kartu responsif yang membungkus dan menyelaraskan dengan benar.

Pusat Konten

Dengan mudah pusatkan elemen secara horizontal dan vertikal.

Belajar Flexbox

Pahami bagaimana setiap properti flexbox mempengaruhi tata letak melalui eksperimen.

Technical Guide

CSS Flexbox diaktifkan dengan display: flex pada elemen wadah. Properti flex-direction menyetel sumbu utama: row (default, horizontal), column (vertikal), dan varian terbaliknya. justify-content mendistribusikan ruang pada sumbu utama: flex-start, flex-end, center, space-between (spasi sama antara item), space-around (spasi sama di sekitar item), dan space-evenly. align-items menyelaraskan pada sumbu silang: stretch (default, mengisi tinggi), flex-start, flex-end, center, dan baseline. flex-wrap: wrap memungkinkan item untuk mengalir ke baris berikutnya ketika mereka meluap. Properti gap menambahkan spasi konsisten antara item tanpa perlu margin. Item fleksibel dapat menggunakan flex-grow, flex-shrink, dan flex-basis untuk mengontrol ukuran. Properti order dapat mengatur ulang item tanpa mengubah HTML. Flexbox ideal untuk tata letak satu dimensi (satu baris atau kolom), sedangkan CSS Grid lebih baik untuk tata letak dua dimensi.

Tips & Best Practices

1
Gunakan justify-content: center dan align-items: center untuk pemusatan yang sempurna
2
Gabungkan flex-wrap: wrap dengan min-width pada item untuk grid responsif
3
Gunakan gap sebagai pengganti margin untuk spasi konsisten antara item
4
Tetapkan flex-shrink: 0 pada item yang tidak boleh dikompresi di bawah ukurannya

Related Tools

Papan Kerja CSS Grid

Pembangun CSS Grid visual dengan kontrol interaktif untuk kolom templat, baris, dan celah.

🎨 CSS & Design

Pembuat Kolom CSS

Buat tata letak teks multi-kolom dengan jumlah kolom, jarak, dan gaya aturan yang dapat disesuaikan.

🎨 CSS & Design

Pengujian Desain Responsif

Pratinjau situs web pada titik breakpoint perangkat yang umum dengan viewer iframe bawaan.

🎨 CSS & Design

Generator Skala Spasi

Buat sistem skala spasi yang konsisten dengan satuan dasar dan pengali yang dapat disesuaikan.

🎨 CSS & Design

Frequently Asked Questions

Q Kapan saya harus menggunakan Flexbox vs Grid?

Gunakan Flexbox untuk tata letak satu dimensi (baris atau kolom). Gunakan Grid untuk tata letak dua dimensi (baris DAN kolom secara bersamaan).

Q Bagaimana saya memusatkan elemen dengan Flexbox?

Tetapkan display: flex; justify-content: center; align-items: center pada kontainer induk.

Q Apa arti dari flex: 1?

flex: 1 adalah singkatan untuk flex-grow: 1; flex-shrink: 1; flex-basis: 0, membuat item tumbuh untuk mengisi ruang yang tersedia.

Q Bisakah saya mengubah urutan item flex?

Ya, gunakan properti order pada item flex. Nilai yang lebih rendah muncul terlebih dahulu. Urutan default adalah 0.

Q Apakah Flexbox berfungsi di semua browser?

Ya, Flexbox didukung oleh semua browser modern termasuk IE11 (dengan beberapa keterbatasan).

About This Tool

Tanah Main CSS Flexbox is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.