CSS Flexbox Playground
Bereksperimen dengan properti kontainer dan item Flexbox dalam playground visual langsung. Sesuaikan arah, perataan, pembungkusan, dan nilai flex per item.
미리보기에서 아이템을 클릭하면 속성을 편집할 수 있습니다.
Apa Itu Flexbox Playground?
Flexbox playground adalah alat interaktif yang memungkinkan Anda bereksperimen dengan properti tata letak CSS Flexbox secara visual. Anda mengubah pengaturan kontainer seperti arah, justifikasi, dan perataan, dan langsung melihat bagaimana item flex disusun ulang. Ini membantu pengembang mempelajari Flexbox atau dengan cepat membuat prototipe tata letak tanpa menulis CSS dari awal.
Cara Menggunakan Flexbox Playground
- Atur properti kontainer — Pilih flex-direction, justify-content, align-items, wrap, dan gap
- Tambah/hapus item — Gunakan tombol untuk menambah atau menghapus item flex (3 hingga 10)
- Edit properti item — Klik item apa pun untuk mengatur flex-grow, shrink, basis, order, dan align-self
- Lihat pratinjau — Saksikan pembaruan tata letak secara real-time
- Salin CSS — Klik salin untuk mendapatkan CSS yang dihasilkan untuk kontainer dan item
Mengapa Menggunakan Flexbox Playground Ini?
- Pembelajaran Visual — Pahami Flexbox dengan melihat perubahan secara instan
- Kontrol Per Item — Atur flex-grow, shrink, basis, order, dan align-self individual
- Output CSS Bersih — Dapatkan CSS berformat baik yang dapat Anda tempel langsung ke proyek Anda
- Tanpa Instalasi — Bekerja secara instan di browser modern mana pun
- Privasi — Semua pemrosesan terjadi secara lokal, tidak ada data yang dikirim ke mana pun
FreeToolbox vs Alat Flexbox Lainnya
| Fitur | FreeToolbox | Flexbox Froggy | Panduan CSS-Tricks |
|---|---|---|---|
| Interaktif | Editor penuh | Berbasis permainan | Contoh statis |
| Properti per item | Ya | Terbatas | Tidak |
| Ekspor CSS | Ya | Tidak | Tidak |
| Dukungan gap | Ya | Tidak | Tidak Tersedia |
| Tema gelap | Ya | Tidak | Tidak |
Pertanyaan umum
Berapa banyak item yang bisa saya tambahkan?
Anda dapat memiliki antara 1 dan 10 item flex. Setiap item diberi kode warna dan dapat dikonfigurasi secara individual.
Apa fungsi flex-grow?
flex-grow menentukan seberapa banyak item harus tumbuh relatif terhadap item lain ketika ruang ekstra tersedia. Nilai 0 berarti tidak ada pertumbuhan, 1 berarti ia mengambil bagiannya dari ruang yang tersisa.
Apa perbedaan antara flex-basis dan width?
flex-basis mengatur ukuran awal item flex sebelum distribusi ruang. Ia bekerja di sepanjang sumbu utama (lebar dalam arah baris, tinggi dalam kolom). Tidak seperti width, ia berpartisipasi dalam algoritma flex.
Bisakah saya menggunakan ini untuk tata letak responsif?
Ya. Gabungkan flex-wrap dengan nilai flex-basis berbasis persentase untuk membuat tata letak responsif. Playground ini membantu Anda bereksperimen sebelum menulis CSS akhir.
Apakah alat ini gratis?
Ya, sepenuhnya gratis tanpa batasan atau pendaftaran yang diperlukan.