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.

<!DOCTYPE html>
<html>
<head>
 <title>Flexbox</title>
</head>
<body>
 <ul>
 <li><a href="#">Item 1</a></li>
 <li><a href="#">Item 2</a></li>
 <li><a href="#">Item 3</a></li>
 <li><a href="#">Item 4</a></li>
 <li><a href="#">Item 5</a></li>
 <li><a href="#">Item 6</a></li>
 </ul>
</body>
</html>

Sebelumnya, tambahkan sedikit tampilan css3 untuk memvisualisasikan dengan jelas apa yang ingin kita pelajari kali ini.

/* // Style overall ------------------------*/

* {
 box-sizing: border-box;
}
body {
 margin: 40px 0;
 background: #203542;
 font-size: 1.3em;
 font-family: helvetica,sans-serif;
}
.nav {
 margin: 0 auto;
 padding: 20px;
 width: 80%;
 border: 2px solid #1d2e3a;
 border-radius: 10px;
 background: #156596;
 list-style-type: none;

}
li {
 margin: 10px;
 border-radius: 10px;
 background: #FFB70F;
 color: #858585;
 color: #203542;
}
.nav a {
 display: block;
 padding: 15px;
 color: inherit;
 text-decoration: none;
 font-weight:bold;
}

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 ;

/* // STATE Flexbox ------------------------*/

.nav {
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-justify-content: space-between;
-webkit-flex-wrap: wrap;
}

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.

arwasil

Designing for love. Mendesain sudah menjadi darahnya sejak mengenal komputer. Sama seperti kamu, bahagia menjalani passionnya. Writer. Presenter. Front end engineer. Master Engineering on Geo Informatics. :D View all posts by arwasil

Comments

6 thoughts on “Tutorial Flexbox CSS3 Basic”

Mengenal Masa Depan CSS3 Layout: Flexbox | Tutorial Web Design says:

August 29, 2013 at 12:49

[…] Untuk memahami lebih lanjut, yuk langsung get dirty on our code. Kamu bisa lanjut ke bagian tutorial flexbox, di sini. […]

Ricky Orlando Napitupulu says:

August 30, 2013 at 00:36

makin mumet ndassku dengan CSS3

Ramlan says:

September 13, 2013 at 09:07

Nah, bisa jadi refrensi ini bro

As Sabiluna says:

November 22, 2013 at 06:54

dengan flexbox, web lebih responsive…saya juga sudah pun coba

Aldi Unanto says:

May 26, 2014 at 16:10

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

Iwan setiawan says:

December 10, 2014 at 07:19

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

Tutorial Web Design

Topik

Tags