⭐ 0
🔍
Teks Imej PDF & Dokumen Audio Muzik elektronik Masa Utiliti Pengesah Esoterik Permainan

Lajur Kotak Flex Lebar Sama — Penjana CSS

Bina reka letak flexbox CSS secara visual: flex-direction, justify-content, align-item, flex-wrap dan gap pada bekas, ditambah dengan flex-grow setiap kanak-kanak, flex-shrink dan flex-basis, semuanya dengan pratonton langsung dan CSS yang boleh disalin.

Memproses... 0%

Hasilnya

Halaman ini membuka penjana dengan flex-grow: 1 telah ditetapkan pada ketiga-tiga kotak pratonton. Tonton mereka: daripada mengecil untuk memuatkan kandungan mereka, setiap kotak menuntut bahagian yang sama dari sisa ruang dalam baris, yang merupakan keseluruhan resipi untuk lajur fleksibel yang sama lebar — tiada lebar peratusan, tiada calc(), tiada matematik piksel tetap untuk disegerakkan.

flex-grow: 1 memberitahu kanak-kanak untuk membesar, dan menetapkannya pada setiap kanak-kanak dalam baris bermakna mereka semua membesar dengan jumlah yang sama, jadi mereka mempunyai lebar yang sama tanpa mengira bilangan atau kandungan yang terdapat di dalamnya. Tambahkan atau alih keluar kotak dengan kawalan di bawah dan lajur yang tinggal diagihkan semula serta-merta untuk kekal sama — ubah saiz tetingkap penyemak imbas pada reka letak ini dalam pengeluaran dan ia berkelakuan dengan cara yang sama.

Ini ialah corak di sebalik grid kad ketinggian yang sama, lajur jadual harga dan bahagian pengaki terbahagi sama rata. Beri satu lajur lebih banyak ruang dengan menaikkan flex-grownya di atas yang lain, atau salin blok CSS di bawah betul-betul seperti yang dijana untuk pemisahan sama rata.

🛡️
Dilaksanakan dalam Pelayar

Fail dan input anda tidak pernah meninggalkan peranti ini. Pemprosesan berjalan sepenuhnya di luar talian. 100% Selamat.

Format & Peraturan yang Diterima

  • Kawalan bekas: flex-direction, justify-content, align-item, flex-wrap dan input jurang dalam piksel, digunakan secara langsung pada pratonton.
  • Tiga kotak kanak-kanak berkod warna secara lalai (tambah sehingga lapan, keluarkan ke bawah kepada dua), setiap satu dengan medan flex-grow, flex-shrink dan flex-asas sendiri.
  • Blok CSS boleh disalin dengan peraturan .flex-container ditambah satu peraturan .flex-item-N bagi setiap kanak-kanak yang mempunyai sifat flex bukan lalai.

Faedah Utama

✓ Setiap kawalan bekas dan pertumbuhan fleksibel, pengecutan fleksibel dan asas fleksibel setiap kanak-kanak mengemas kini tiga kotak pratonton bernombor secara langsung, jadi anda melihat dengan tepat apa yang dilakukan oleh peraturan kotak fleksibel anda sebelum menyentuh helaian gaya.
✓ Penjana hanya mencetak peraturan kanak-kanak yang sebenarnya berbeza daripada lalai CSS, jadi kod yang disalin kekal pendek dan boleh dibaca dan bukannya menyatakan semula flex-grow: 0 pada setiap kotak.
✓ Halaman pratetap menyelesaikan reka letak yang dicari oleh orang mengikut nama: memusatkan div, bar navigasi kanan pautan kiri logo dan lajur fleksibel yang sama lebar — buka satu dan alat sudah dikonfigurasikan.

Kes Penggunaan

  • • Dapatkan CSS yang tepat untuk memusatkan div secara mendatar dan menegak dengan menonton justify-content dan align-item berfungsi pada kotak pratonton langsung.
  • • Bina reka letak navbar logo-kiri, pautan-kanan dengan ruang-antara dan jajar-item: tengah, kemudian salin CSS bekas terus ke dalam komponen pengepala anda.
  • • Bandingkan ruang-antara, ruang-keliling dan ruang-sekata bersebelahan pada tiga kotak yang sama dan bukannya meneka yang mana satu sepadan dengan jarak yang anda inginkan.