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

CSS Flexbox Navbar — Logo Kiri, Pautan Kanan

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 pratetap penjana flexbox kepada susun atur bar navigasi klasik: justify-content set to space- between and align-item set to center. Letakkan logo dalam kotak pertama dan deretan pautan navigasi pada yang terakhir (atau belah pautan merentas kotak tengah) dan bekas flexbox menolaknya ke hujung bertentangan bar sambil memastikan setiap item berbaris pada pusat menegak yang sama, tidak kira berapa tinggi logo atau teks pautan.

space-between adalah perkara yang menjadikan ini berfungsi: ia menyematkan anak pertama ke tepi permulaan dan anak terakhir ke tepi hujung, kemudian merebak mana-mana kanak-kanak yang tinggal secara sama rata di antara mereka — betul-betul logo kiri, pautan kanan membentuk hampir setiap pengepala tapak menggunakan. align-item: tengah kemudian menyelesaikan penjajaran menegak yang dahulunya memerlukan penggodaman ketinggian garisan atau helah paparan sel jadual.

Laraskan kiraan kanak-kanak agar sepadan dengan bar navigasi sebenar anda — dua kotak untuk bar logo-dan-CTA kosong, lebih banyak untuk logo serta beberapa pautan — dan tonton reka letak menyesuaikan secara langsung. Salin blok CSS sebaik sahaja ia sepadan dengan pengepala anda, atau buka ruang-antara pratetap jika anda ingin melihat satu sifat itu dibandingkan dengan saudara terdekatnya.

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