CSS Flexbox Playground
Bereksperimen dengan sifat kontena dan item Flexbox dalam playground visual secara langsung. Laraskan arah, penjajaran, pembungkusan, dan nilai flex setiap item.
미리보기에서 아이템을 클릭하면 속성을 편집할 수 있습니다.
Apakah Itu Flexbox Playground?
Flexbox playground ialah alat interaktif yang membolehkan anda bereksperimen dengan sifat reka letak CSS Flexbox secara visual. Anda mengubah tetapan kontena seperti arah, justifikasi dan penjajaran, dan serta-merta melihat bagaimana item flex disusun semula. Ia membantu pembangun mempelajari Flexbox atau membuat prototaip reka letak dengan cepat tanpa menulis CSS dari awal.
Cara Menggunakan Flexbox Playground
- Tetapkan properti kontena — Pilih flex-direction, justify-content, align-items, wrap, dan gap
- Tambah/buang item — Gunakan butang untuk menambah atau membuang item flex (3 hingga 10)
- Edit properti item — Klik mana-mana item untuk menetapkan flex-grow, shrink, basis, order, dan align-self
- Lihat pratonton — Tonton kemas kini reka letak dalam masa nyata
- Salin CSS — Klik salin untuk mendapatkan CSS yang dijana untuk kedua-dua kontena dan item
Mengapa Menggunakan Flexbox Playground Ini?
- Pembelajaran Visual — Fahami Flexbox dengan melihat perubahan serta-merta
- Kawalan Setiap Item — Tetapkan flex-grow, shrink, basis, order, dan align-self individu
- Output CSS Bersih — Dapatkan CSS yang diformat dengan baik yang boleh anda tampal terus ke dalam projek anda
- Tiada Pemasangan — Berfungsi serta-merta dalam mana-mana pelayar moden
- Privasi — Semua pemprosesan berlaku secara tempatan, tiada data dihantar ke mana-mana
FreeToolbox vs Alat Flexbox Lain
| Ciri | FreeToolbox | Flexbox Froggy | Panduan CSS-Tricks |
|---|---|---|---|
| Interaktif | Editor penuh | Berasaskan permainan | Contoh statik |
| Properti setiap item | Ya | Terhad | Tidak |
| Eksport CSS | Ya | Tidak | Tidak |
| Sokongan Gap | Ya | Tidak | N/A |
| Tema gelap | Ya | Tidak | Tidak |
Soalan lazim
Berapa banyak item yang boleh saya tambah?
Anda boleh mempunyai antara 1 dan 10 item flex. Setiap item dikodkan warna dan boleh dikonfigurasi secara individu.
Apakah fungsi flex-grow?
flex-grow menentukan berapa banyak item harus berkembang berbanding item lain apabila ruang tambahan tersedia. Nilai 0 bermaksud tiada pertumbuhan, 1 bermaksud ia mengambil bahagian ruang yang tinggal.
Apakah perbezaan antara flex-basis dan lebar?
flex-basis menetapkan saiz awal item flex sebelum pengagihan ruang. Ia berfungsi di sepanjang paksi utama (lebar dalam arah baris, tinggi dalam lajur). Tidak seperti lebar, ia mengambil bahagian dalam algoritma flex.
Bolehkah saya menggunakan ini untuk reka letak responsif?
Ya. Gabungkan flex-wrap dengan nilai flex-basis berasaskan peratusan untuk mencipta reka letak responsif. Playground ini membantu anda bereksperimen sebelum menulis CSS akhir.
Adakah alat ini percuma?
Ya, percuma sepenuhnya tanpa had atau pendaftaran diperlukan.