Tutorial Flexbox CSS3 Basic

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.
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>
Sebelumnya, tambahkan sedikit tampilan css3 untuk memvisualisasikan dengan jelas apa yang ingin kita pelajari kali ini.
1/* // Style overall ------------------------*/
2 
3* {
4 box-sizing: border-box;
5}
6body {
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}
22li {
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}
dan hasilnya seperti yang kita harapkan, beberapa segi empat yang tersusun secara vertikal ke bawah membentuk list.
Hasil
tutorial-flexbox-1
Kamu bisa lihat juga hasilnya disini Flexbox Basic yang saya tulis dengan akun (@arwasil) di CodePen .
Setelah itu, kita tambahkan flexbox properties dengan menambahkan ;
1/* // STATE Flexbox ------------------------*/
2 
3.nav {
4display: -webkit-flex;
5-webkit-flex-direction: row;
6-webkit-justify-content: space-between;
7-webkit-flex-wrap: wrap;
8}
Untuk menghindari masalah cross browser jangan lupa menambahkan prefix -webkit , -moz, -ms dan -o
Hasil
Screen Shot 2013-08-27 at 7.17.04 PM
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

Tidak ada komentar:

Posting Komentar