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

Kolom Flexbox dengan Lebar yang Sama — Generator 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

Halaman ini membuka generator dengan flex-grow: 1 sudah disetel pada ketiga kotak pratinjau. Perhatikan: alih-alih menyusut agar sesuai dengan kontennya, setiap kotak mengklaim bagian yang sama dari ruang sisa di baris, yang merupakan keseluruhan resep untuk kolom fleksibel dengan lebar yang sama — tanpa persentase lebar, tanpa kalkulasi(), tanpa perhitungan piksel tetap agar tetap sinkron.

flex-grow: 1 memberi tahu seorang anak untuk tumbuh, dan menetapkannya pada setiap anak di baris berarti mereka semua tumbuh dengan jumlah yang sama, sehingga lebarnya akan sama terlepas dari berapa banyak atau konten apa yang ada di dalamnya. Tambahkan atau hapus kotak dengan kontrol di bawah dan kolom yang tersisa akan langsung didistribusikan ulang agar tetap sama — ubah ukuran jendela browser pada tata letak ini dalam produksi dan perilakunya akan sama.

Ini adalah pola di balik kisi-kisi kartu dengan tinggi yang sama, kolom tabel harga, dan bagian footer yang terbagi rata. Berikan satu kolom lebih banyak ruang dengan menaikkan pertumbuhan fleksibelnya di atas yang lain, atau salin blok CSS di bawah persis seperti yang dihasilkan untuk pemisahan yang sama rata.

🛡️
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.