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

Penjana CSS Flexbox

Bina susun atur flexbox CSS secara visual: flex-direction, justify-content, align-items, flex-wrap dan gap pada bekas, serta flex-grow, flex-shrink dan flex-basis setiap anak, semuanya dengan pratonton langsung dan CSS yang boleh disalin.

🔒 Diproses sepenuhnya dalam penyemak imbas anda — tiada apa yang anda masukkan di sini pernah dimuat naik.

Memproses... 0%

Keputusan

Susun atur flexbox mempunyai dua buku peraturan yang berasingan — sifat pada bekas (flex-direction, justify-content, align-items, flex-wrap, gap) dan sifat pada setiap anak (flex-grow, flex-shrink, flex-basis) — dan mencampuradukkannya adalah punca paling biasa pepijat "mengapa ini tidak memusat / berkembang / membalut seperti yang saya jangkakan". Penjana ini meletakkan kedua-dua buku peraturan pada skrin serentak: ubah mana-mana kawalan bekas atau medan anak sendiri dan tiga kotak bernombor berkod warna akan dikemas kini serta-merta, jadi sebab dan akibat kekal kelihatan.

Bahagian bekas meliputi setiap paksi susun atur: pilih arah, pilih cara anak diedarkan di sepanjang paksi utama dengan justify-content, jajarkannya pada paksi silang, tentukan sama ada ia membalut ke baris baharu, dan tetapkan gap dan bukannya helah margin di antaranya. Bahagian anak juga begitu nyata: tambah kotak sehingga lapan, kurangkan kepada dua, dan beri mana-mana daripadanya flex-grow, flex-shrink dan flex-basis tersendiri — penjana hanya mencetak peraturan CSS setiap anak apabila sekurang-kurangnya satu daripadanya berbeza daripada lalai pelayar, jadi kod yang disalin tidak pernah mengisi sendiri dengan flex-grow: 0 pada kotak yang tidak memerlukannya.

Halaman praset terus melompat ke susun atur yang sebenarnya dicari orang mengikut nama: cara memusatkan div (soalan susun atur CSS yang paling banyak ditanya, diselesaikan dengan justify-content dan align-items kedua-duanya ditetapkan kepada center), bar navigasi logo-kiri pautan-kanan, lajur fleksibel sama lebar melalui flex-grow, dan perbandingan sebelah menyebelah space-between dengan saudara terdekatnya space-around dan space-evenly.

Seperti setiap alat di laman ini, penjana ini percuma dan berjalan sepenuhnya dalam pelayar anda: tiada muat naik, tiada akaun, dan ia terus berfungsi di luar talian sebaik sahaja halaman dimuatkan.

Seronok menggunakan alat ini? Rasa produk ini berguna? Nampak potensi di dalamnya dan ingin menyokongnya?

🛡️
Dilaksanakan Dalam Pelayar

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

Format & Peraturan Diterima

  • Kawalan bekas: flex-direction, justify-content, align-items, flex-wrap dan input gap dalam piksel, digunakan secara langsung pada pratonton.
  • Tiga kotak anak berkod warna secara lalai (tambah sehingga lapan, kurangkan kepada dua), setiap satunya dengan medan flex-grow, flex-shrink dan flex-basis tersendiri.
  • Blok CSS boleh disalin dengan peraturan .flex-container serta satu peraturan .flex-item-N bagi setiap anak yang mempunyai sifat flex bukan lalai.

Faedah Utama

✓ Setiap kawalan bekas dan nilai flex-grow, flex-shrink serta flex-basis setiap anak mengemas kini tiga kotak pratonton bernombor secara langsung, jadi anda dapat melihat dengan tepat apa yang dilakukan oleh peraturan flexbox anda sebelum menyentuh stylesheet.
✓ Penjana ini hanya mencetak peraturan anak yang benar-benar berbeza daripada lalai CSS, jadi kod yang disalin kekal pendek dan mudah dibaca dan bukannya menyatakan semula flex-grow: 0 pada setiap kotak.
✓ Halaman praset menyelesaikan susun atur yang sering dicari orang mengikut nama: memusatkan div, bar navigasi dengan logo di kiri dan pautan di kanan, serta lajur fleksibel sama lebar — buka satu halaman dan alat ini sudah siap dikonfigurasikan.

Kes Penggunaan

  • • Dapatkan kod CSS yang tepat untuk memusatkan div secara mendatar dan menegak dengan melihat cara justify-content dan align-items berfungsi pada kotak pralihat langsung.
  • • Bina susun atur bar navigasi dengan logo di kiri dan pautan di kanan menggunakan space-between dan align-items: center, kemudian salin CSS kontena terus ke dalam komponen pengepala anda.
  • • Bandingkan space-between, space-around dan space-evenly secara bersebelahan pada tiga kotak yang sama dan bukannya meneka yang mana satu sepadan dengan jarak yang anda mahukan.