Sudah baca mengenal konsep dasar flexbox ?
Kalau belum, kamu bisa mencari tau apa itu flexbox di berbagai sumber. Bantuan Google sangatlah disarankan. Kamu juga bisa membaca disini untuk penjelasan konsep flexbox secara general.
Untuk tutorial pertama flexbox kita akan membuat navigation bar menggunakan flexbox.
Buat markup sederhana merepresentasikan relasi parent (elemen ul dengan class nav) dan child (elemen li) serta menampilkan button nav.
Sebelumnya, tambahkan sedikit tampilan css3 untuk memvisualisasikan dengan jelas apa yang ingin kita pelajari kali ini.
dan hasilnya seperti yang kita harapkan, beberapa segi empat yang tersusun secara vertikal ke bawah membentuk list.
Hasil
Kamu bisa lihat juga hasilnya disini Flexbox Basic yang saya tulis dengan akun (@arwasil) di CodePen .
Setelah itu, kita tambahkan flexbox properties dengan menambahkan ;
Untuk menghindari masalah cross browser jangan lupa menambahkan prefix -webkit , -moz, -ms dan -o
Hasil
Lihat perbedaannya ?
Kamu bisa lihat di alamat berikut ini http://cdpn.io/ekKqc.
Flexbox Modules menjadikan class nav flex container dengan elemen <li> sebagai flex items. Layout pun berubah menjadi menjalar horizontal dikarenakan direction yang dipilih row (dan memang nilai ini merupakan nilai default direction). Dan perhatikan, hal yang menarik adalah saat viewport kita besar kecilkan, flex items akan menyesuaikan dengan saat proporsional. Kita tidak perlu susah-susah mengatur besar space di antara flex items.
[…] Untuk memahami lebih lanjut, yuk langsung get dirty on our code. Kamu bisa lanjut ke bagian tutorial flexbox, di sini. […]
makin mumet ndassku dengan CSS3
Nah, bisa jadi refrensi ini bro
dengan flexbox, web lebih responsive…saya juga sudah pun coba
ul li{ display: inline; }
Itu saja sih yg penting. Karena pada dasarnya memang dikhususkan untuk membuat navigasi seperti contoh di atas. Kita bisa mengoptimalkan penggunaan rules css sebaik mungkin tanpa harus menggunakan bantuan dari package atau modul seperti flexbox. Kecuali memang sebagian besar kita pakai classes nya dari flexbox itu sendiri.
Oiya sepertinya markup html-nya ada yg kurang, belum ditambahkan attribute class .nav
Thanks infonya gan
salam kenal saya seneng baca artikel nya tapi sayang saya tidal punya basic web design tapi saya mau bisa ‘kirimin eBook nya donk buat pemula ,tkasih sebelumnya