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

Penjana Flexbox 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

Susun atur kotak flex mempunyai dua buku peraturan yang berasingan — sifat pada bekas (arah lentur, kandungan justifikasi, item sejajar, balut lentur, jurang) dan sifat pada setiap kanak-kanak (pertumbuhan lentur, pengecutan lentur, asas lentur) — dan mencampurkannya ialah sumber "mengapa pemusatan / pertumbuhan / pepijat ini tidak seperti yang saya jangkakan. Penjana ini meletakkan kedua-dua buku peraturan pada skrin sekali gus: tukar mana-mana kawalan bekas atau mana-mana medan kanak-kanak sendiri dan tiga kotak berkod warna bernombor kemas kini serta-merta, jadi sebab dan akibat kekal kelihatan.

Bahagian kontena meliputi setiap paksi reka letak: pilih arah, pilih cara kanak-kanak diedarkan di sepanjang paksi utama dengan kandungan justify, sejajarkannya pada paksi silang, tentukan sama ada mereka membalut pada garisan baharu dan tetapkan jurang dan bukannya penggodaman margin di antara mereka. Bahagian kanak-kanak adalah sama nyata: tambahkan kotak hingga lapan, keluarkan hingga dua, dan berikan mana-mana satu daripadanya flex-grow, flex-shrink dan flex-basis mereka sendiri — penjana hanya mencetak peraturan CSS setiap kanak-kanak apabila sekurang-kurangnya satu daripadanya berbeza daripada lalai penyemak imbas, jadi kod yang disalin tidak sekali-kali melapisi dirinya dengan flex-grow: 0 pada kotak yang tidak memerlukannya.

Halaman pratetap melompat terus ke susun atur yang sebenarnya dicari oleh orang mengikut nama: cara untuk memusatkan div (soalan susun atur CSS yang paling banyak ditanya, diselesaikan dengan justify-content dan align-item yang kedua-duanya ditetapkan ke tengah), pautan logo-left-right navbar, lajur fleksibel sama lebar melalui flex-grow, dan perbandingan bersebelahan antara ruang dan ruang relatifnya.

Seperti setiap alat di tapak ini, penjana adalah percuma dan berjalan sepenuhnya dalam penyemak imbas anda: tiada muat naik, tiada akaun dan ia terus berfungsi di luar talian setelah halaman dimuatkan.

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