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.
Sumber
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.
1 | <!DOCTYPE html> |
2 | <html> |
3 | <head> |
4 | <title>Flexbox</title> |
5 | </head> |
6 | <body> |
7 | <ul> |
8 | <li><a href="#">Item 1</a></li> |
9 | <li><a href="#">Item 2</a></li> |
10 | <li><a href="#">Item 3</a></li> |
11 | <li><a href="#">Item 4</a></li> |
12 | <li><a href="#">Item 5</a></li> |
13 | <li><a href="#">Item 6</a></li> |
14 | </ul> |
15 | </body> |
16 | </html> |
1 | /* // Style overall ------------------------*/ |
2 |
3 | * { |
4 | box-sizing: border-box; |
5 | } |
6 | body { |
7 | margin: 40px 0; |
8 | background: #203542; |
9 | font-size: 1.3em; |
10 | font-family: helvetica,sans-serif; |
11 | } |
12 | .nav { |
13 | margin: 0 auto; |
14 | padding: 20px; |
15 | width: 80%; |
16 | border: 2px solid #1d2e3a; |
17 | border-radius: 10px; |
18 | background: #156596; |
19 | list-style-type: none; |
20 |
21 | } |
22 | li { |
23 | margin: 10px; |
24 | border-radius: 10px; |
25 | background: #FFB70F; |
26 | color: #858585; |
27 | color: #203542; |
28 | } |
29 | .nav a { |
30 | display: block; |
31 | padding: 15px; |
32 | color: inherit; |
33 | text-decoration: none; |
34 | font-weight:bold; |
35 | } |
Hasil
Kamu bisa lihat juga hasilnya disini Flexbox Basic yang saya tulis dengan akun (@arwasil) di CodePen .
1 | /* // STATE Flexbox ------------------------*/ |
2 |
3 | .nav { |
4 | display: -webkit-flex; |
5 | -webkit-flex-direction: row; |
6 | -webkit-justify-content: space-between; |
7 | -webkit-flex-wrap: wrap; |
8 | } |
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.
Sumber
0 komentar:
Posting Komentar