⭐ 0
🔍
Teks Gambar PDF & Dokumen Audio Musik Elektronika Waktu Utilitas Validator Esoterik Game

Generator CSS Flexbox

Bangun tata letak CSS flexbox secara visual: flex-direction, justify-content, align-items, flex-wrap, dan gap pada kontainer, ditambah flex-grow, flex-shrink, dan flex-basis per anak, semuanya dengan pratinjau langsung dan CSS yang dapat disalin.

🔒 Diproses sepenuhnya di browser Anda — apa pun yang Anda masukkan di sini tidak akan pernah diunggah.

Memproses... 0%

Hasil

Tata letak flexbox memiliki dua buku aturan terpisah — properti pada kontainer (flex-direction, justify-content, align-items, flex-wrap, gap) dan properti pada setiap anak (flex-grow, flex-shrink, flex-basis) — dan mencampuradukkannya adalah sumber paling umum bug "mengapa ini tidak di tengah / tumbuh / membungkus sesuai harapan". Generator ini menampilkan kedua buku aturan di layar sekaligus: ubah kontrol kontainer apa pun atau field anak mana pun dan tiga kotak bernomor dengan kode warna segera diperbarui, sehingga sebab dan akibat tetap terlihat.

Sisi kontainer mencakup setiap sumbu tata letak: pilih arah, pilih bagaimana anak didistribusikan sepanjang sumbu utama dengan justify-content, ratakan mereka di sumbu silang, putuskan apakah mereka membungkus ke baris baru, dan atur gap alih-alih trik margin di antaranya. Sisi anak sama nyatanya: tambah kotak hingga delapan, hapus hingga dua, dan beri mereka flex-grow, flex-shrink, dan flex-basis sendiri — generator hanya mencetak aturan CSS per anak ketika setidaknya salah satunya berbeda dari default browser, sehingga kode yang disalin tidak pernah membengkak sendiri dengan flex-grow: 0 pada kotak yang tidak memerlukannya.

Halaman preset langsung menuju tata letak yang benar-benar dicari orang berdasarkan nama: cara menengahkan div (pertanyaan tata letak CSS yang paling sering ditanyakan, diselesaikan dengan justify-content dan align-items keduanya diatur ke center), navbar logo di kiri tautan di kanan, kolom fleksibel lebar sama via flex-grow, dan perbandingan berdampingan space-between melawan kerabat dekatnya space-around dan space-evenly.

Seperti setiap alat di situs ini, generator ini gratis dan berjalan sepenuhnya di browser Anda: tanpa unggahan, tanpa akun, dan tetap bekerja offline setelah halaman dimuat.

Menikmati alat ini? Merasa produk ini bermanfaat? Melihat potensi di dalamnya dan ingin mendukungnya?

🛡️
Dijalankan di Browser

File dan masukan Anda tidak pernah meninggalkan perangkat ini. Pemrosesan berjalan sepenuhnya offline. 100% Aman.

Format & Aturan yang Diterima

  • Kontrol kontainer: flex-direction, justify-content, align-items, flex-wrap, dan input gap dalam piksel, diterapkan langsung ke pratinjau.
  • Tiga kotak anak dengan kode warna secara default (tambahkan hingga delapan, hapus hingga dua), masing-masing dengan field flex-grow, flex-shrink, dan flex-basis sendiri.
  • Blok CSS yang dapat disalin dengan aturan .flex-container plus satu aturan .flex-item-N per anak yang memiliki properti flex non-default.

Manfaat Utama

✓ Setiap kontrol kontainer dan nilai flex-grow, flex-shrink, serta flex-basis setiap anak memperbarui tiga kotak pratinjau bernomor secara langsung, sehingga Anda melihat persis apa yang dilakukan aturan flexbox Anda sebelum menyentuh stylesheet.
✓ Generator hanya mencetak aturan anak yang benar-benar berbeda dari default CSS, sehingga kode yang disalin tetap pendek dan mudah dibaca alih-alih mengulang flex-grow: 0 pada setiap kotak.
✓ Halaman preset menyelesaikan tata letak yang dicari orang berdasarkan nama: menengahkan div, navbar dengan logo di kiri dan tautan di kanan, serta kolom fleksibel dengan lebar sama — buka salah satunya dan alat sudah terkonfigurasi.

Kasus Penggunaan

  • • Dapatkan CSS yang tepat untuk menengahkan div secara horizontal dan vertikal dengan melihat cara kerja justify-content dan align-items pada pratinjau kotak langsung.
  • • Bangun tata letak navbar dengan logo di kiri dan tautan di kanan menggunakan space-between dan align-items: center, lalu salin CSS kontainernya langsung ke komponen header Anda.
  • • Bandingkan space-between, space-around, dan space-evenly secara berdampingan pada tiga kotak yang sama alih-alih menebak yang mana yang sesuai dengan spasi yang Anda inginkan.