Selamat Datang

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

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.





Penulis :

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

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

  2. makin mumet ndassku dengan CSS3

  3. Ramlan says:

    Nah, bisa jadi refrensi ini bro

  4. As Sabiluna says:

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

  5. Aldi Unanto says:

    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

  6. Iwan setiawan says:

    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

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development