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

Pembuat Flexbox CSS

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

Memproses... 0%

Hasil

Tata letak flexbox memiliki dua buku aturan terpisah — properti pada container (flex-direction, justify-content, align-items, flex-wrap, gap) dan properti pada setiap turunan (flex-grow, flex-shrink, flex-basis) — dan mencampurkannya adalah sumber paling umum dari bug "mengapa pemusatan/pertumbuhan/pembungkusan ini tidak seperti yang saya harapkan". Generator ini menempatkan kedua buku peraturan di layar sekaligus: ubah kontrol kontainer atau bidang milik anak mana pun dan tiga kotak bernomor dan berkode warna segera diperbarui, sehingga sebab dan akibat tetap terlihat.

Sisi penampung mencakup setiap sumbu tata letak: pilih arah, pilih bagaimana anak-anak didistribusikan di sepanjang sumbu utama dengan konten justify, sejajarkan pada sumbu silang, putuskan apakah anak-anak tersebut digabungkan ke baris baru, dan atur jarak alih-alih margin hack di antara mereka. Sisi anak sama nyatanya: tambahkan kotak hingga delapan, hapus hingga dua, dan berikan flex-grow, flex-shrink, dan flex-basis pada masing-masing kotak tersebut — generator hanya mencetak aturan CSS per anak ketika setidaknya salah satu dari aturan tersebut berbeda dari default browser, sehingga kode yang disalin tidak pernah diisi dengan flex-grow: 0 pada kotak yang tidak memerlukannya.

Halaman preset melompat langsung ke tata letak yang sebenarnya dicari orang berdasarkan nama: cara memusatkan div (satu-satunya pertanyaan tata letak CSS yang paling banyak ditanyakan, diselesaikan dengan justify-content dan align-items keduanya disetel ke tengah), logo-link kiri-navbar kanan, kolom fleksibel dengan lebar yang sama melalui pertumbuhan fleksibel, dan perbandingan spasi-antara secara berdampingan dengan kerabat dekatnya space-around dan space-evenly.

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

🛡️
Dieksekusi di Browser

File dan masukan Anda tidak pernah keluar dari 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 berkode warna secara default (tambahkan hingga delapan, hapus hingga dua), masing-masing dengan bidang pertumbuhan fleksibel, penyusutan fleksibel, dan basis fleksibel.
  • Blok CSS yang dapat disalin dengan aturan .flex-container ditambah satu aturan .flex-item-N per turunan yang memiliki properti fleksibel non-default.

Manfaat Utama

✓ Setiap kontrol kontainer dan pembaruan flex-grow, flex-shrink, dan flex-basis setiap anak, tiga kotak pratinjau bernomor aktif, sehingga Anda melihat dengan tepat apa yang dilakukan aturan flexbox Anda sebelum menyentuh stylesheet.
✓ Generator hanya mencetak aturan anak yang sebenarnya berbeda dari default CSS, sehingga kode yang disalin tetap pendek dan mudah dibaca alih-alih menyatakan ulang flex-grow: 0 di setiap kotak.
✓ Halaman preset menyelesaikan tata letak yang dicari orang berdasarkan nama: div tengah, bilah navigasi kiri-link-kanan logo, dan kolom fleksibel dengan lebar yang sama — buka satu dan alat sudah dikonfigurasi.

Kasus Penggunaan

  • • Dapatkan CSS yang tepat untuk memusatkan div secara horizontal dan vertikal dengan melihat konten justifikasi dan item penyelarasan berfungsi di kotak pratinjau langsung.
  • • Buat tata letak navbar kiri-logo, tautan-kanan dengan spasi-antara dan align-items: center, lalu salin CSS container langsung ke komponen header Anda.
  • • Bandingkan jarak antara, jarak sekitar, dan jarak rata secara berdampingan pada tiga kotak yang sama alih-alih menebak mana yang cocok dengan jarak yang Anda inginkan.