Cara Membuat Navbar Menggunakan FlexBox
Sebelumnya kita sudah mempelajari sebagian besar cara menggunakan flexbox, dipostingan ini saya akan memberikan contoh bagaimana cara membuat navbar menggunakan flexbox.
index.html
style.css no navbar no 1
style.css no navbar no 2
Saya akan memberikan 2 contoh bentuk navbar, dan disini saya menggunakan css flexbox property justify-content.
Teman - teman bisa lihat gambar di bawah ini. gambar yang atas merupakan navbar yang menggunakan justify-content:space-between; sedangkan gambar yang di bawah menggunakan justify-content:flex-end;
Untuk navbar no 2, seperti yang saya jelaskan di atas, menggunakan justify-content:flex-end, selain itu pada class logo kita tambahkan property margin-right:auto;
Lebih jelasnya teman - teman bisa lihat source code di bawah ini.
Post a Comment for "Cara Membuat Navbar Menggunakan FlexBox"