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

CSS Flexbox Navbar — Logo Kiri, Tautan Kanan

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 preset generator flexbox ke tata letak navbar klasik: justify-content diatur ke space-between dan align-items diatur ke tengah. Letakkan logo di kotak pertama dan deretan tautan nav di kotak terakhir (atau pisahkan tautan di kotak tengah) dan wadah flexbox mendorongnya ke ujung bilah yang berlawanan sambil menjaga setiap item berbaris di pusat vertikal yang sama, tidak peduli seberapa tinggi logo atau teks tautannya.

space-between inilah yang membuat ini berhasil: ia menyematkan anak pertama ke tepi awal dan anak terakhir ke tepi akhir, lalu menyebarkan anak-anak yang tersisa secara merata di antara keduanya — persis seperti logo kiri, bentuk tautan kanan yang digunakan hampir di setiap header situs. align-items: center kemudian menyelesaikan perataan vertikal yang biasanya memerlukan peretasan ketinggian garis atau trik tampilan sel tabel.

Sesuaikan jumlah anak agar sesuai dengan bilah navigasi Anda yang sebenarnya — dua kotak untuk logo dan bilah CTA kosong, lebih banyak untuk logo ditambah beberapa tautan — dan saksikan tata letaknya beradaptasi secara langsung. Salin blok CSS setelah cocok dengan header Anda, atau buka spasi di antara preset jika Anda ingin melihat satu properti dibandingkan dengan kerabat dekatnya.

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