Tentang alat ini
CSS Flexbox Playground adalah editor interaktif untuk properti tata letak utama dari sebuah kontainer flex. Pilih nilai untuk flex-direction, justify-content, align-items, dan flex-wrap dari empat dropdown, dan pratinjau berisi lima kotak bernomor tersusun ulang secara langsung, jadi Anda dapat melihat bagaimana setiap properti membentuk tata letak sebelum menulis kode apa pun.
Di bawah pratinjau, aturan .container yang cocok dihasilkan saat Anda bekerja: display: flex diikuti oleh empat deklarasi yang Anda pilih. Satu tombol menyalin seluruh blok ke papan klip Anda, siap ditempel ke stylesheet. Hanya properti tingkat kontainer ini yang diekspos; pengaturan per-item seperti flex-grow, order, atau align-self tidak dicakup.
Semuanya berjalan di browser Anda. Tidak ada yang diunggah, tidak ada akun atau pelacakan, dan bekerja offline. Ini cara cepat untuk membangun intuisi flexbox atau menghasilkan aturan awal yang kemudian Anda sempurnakan secara manual.
Pertanyaan yang sering diajukan
Apa yang ditampilkan pratinjau?
Sebuah kontainer flex yang memuat lima kotak bernomor yang tersusun ulang secara langsung saat Anda mengubah flex-direction, justify-content, align-items, atau flex-wrap.
Apakah CSS yang dihasilkan siap digunakan?
Ya. Salin aturan .container yang dihasilkan langsung ke stylesheet Anda; aturan itu berisi display: flex ditambah empat properti yang Anda pilih.
Properti flexbox mana yang bisa saya sesuaikan?
Empat dropdown mengontrol flex-direction (row, row-reverse, column, column-reverse), justify-content (flex-start, flex-end, center, space-between, space-around, space-evenly), align-items (stretch, flex-start, flex-end, center, baseline), dan flex-wrap (nowrap, wrap, wrap-reverse).
Apakah keluaran menyertakan gap atau pengaturan flex per-item?
Tidak. Aturan yang disalin hanya berisi display: flex dan empat properti kontainer. Gap 8px di pratinjau hanya untuk penataan jarak, dan properti tingkat item seperti flex-grow, order, atau align-self tidak disertakan.
Alat lainnya