Mengenal Masa Depan CSS3 Layout: Flexbox

Ada yang sudah pernah mendengar flexbox?

Yap, flexbox memang css3 module yang powerfull untuk mengatur layout. Buat kamu yang belum pernah mendengarnya, jangan panik, this is your chance to catch up what is flexbox is.
Flexible Layout (Flexbox) merupakan modul css3  (bukan properties, karena terdiri dari rangkaian properties) yang bertujuan untuk memberikan pengaturan baik layout, aligning, dan pengaturan jarak antar item dalam suatu container secara fleksibel. Kita dapat mengatur posisi item (dapat berupa apapun; div, span, section, ul, li, a, etc) bahkan tanpa tahu besarnya dimensi item tersebut (itu sebabnya dinamakan flex, karena fleksibel).

Untuk apa pakai flexbox ?

Ide utama dibalik dibentuknya flexbox yaitu memberikan container kemampuan untuk mengatur panjang, lebar, dan urutan item-item yang berada di dalamnya dengan maksud memaksimalkan space yang ada. Hal ini penting diketahui developer karena kebutuhan sekarang mencakup banyak dimensi dalam berbagai device dan resolusi.
Ok, sekarang kamu udah tau & punya alasan kenapa harus pakai flexbox di coding kamu. Masuk ke dalam intinya. Here we go.

Konsep flexbox

Flexbox diaplikasikan kepada suatu container yang kemudian disebut Flex Container. Di dalam satu container terdapat item yang jumlahnya boleh lebih dari satu. Item ini disebut Flex Items. Perlu diperhatikan, flexbox memerankan relasi parent dan child. Elemen yang menjadi flex item pasti merupakan anak langsung dari suatu elemen flex container.

Flexbox memiliki sistem koordinat sendiri, yaitu
Main Axis : garis horizontal yang terbentang dari kiri ke kanan (by default)
Cross Axis : garis vertikal yang terbentang sari atas ke bawah (by default)

Flex item bediri pada suatu garis yang disebut Flex Line. Flex line dapat horizontal maupun vertikal tergantung penentuan di properties flex direction. Basically, item yang dibuat akan berada sepanjang garis flex line dari main-start ke main-finish atau dari cross-start ke cross-finish.

Flexbox Properties

Di awal udah diberitahu bahwa flexbox merupakan serangkaian properties, tidak hanya satu. Untuk mengatur flex items disediakan berbagai properties. These are some.

Display: flex | inline-flex | flexbox (parent element)

Properties ini merupakan prop paling utama. Ini ditujukan pada elemen container. Tujuannya menetapkam bahwa elemen yg dituju merupakan flex container. Tanpa deklarasikan ini, semua prop flexbox yang lain tidak berarti apa apa.

1	display : flex | inline-flex | other values

Perhatikan:
- float, clear, vertical-align tidak berpengaruh samsek terhadap flex item.
- kolom css, seperti biasanya, tidak berlaku dalam flex container

Flex direction (parent element)

Menentukan arah koordinat flex container apakah dia menjalar secara horizontal (row) atau vertikal (column). Untuk lebih jelasnya bisa dilihat di sini. Nilai yang ada meliputi row, column, row-reverse, dan column-reverse.

1	flex-direction: row | row-reverse | column | column-reverse

Flex wrap (parent element)

Menentukan jumlah line dalam flex container, apakah single line atau multi line. Selain itu menentukan arah & posisi cross axis untuk mengatur dimana item yg baru akan ditempatkan. Nilai yang ada meliputi wrap, nowrap, wrap-reverse

1	flex-wrap: nowrap | wrap | wrap-reverse

Flex flow (parent element)

Ini meruapkan bentuk singkat (shorthand) dari 2 properties di atas (direction & wrap). Shorthand sangat lumrah dilakukan developers karena faktor efektifitas & simplicity DOM.
code

1	flex-flow: <‘flex-direction’> || <‘flex-wrap’>

Justify content (parent element)

Menentukan pengaturan flex item di sepanjang main axis. Prop ini mengatur posisi items dan memanfaatkan space kosong yang ada. Nilai yang ada meliputi flex-start, center, flex-end, space-between, dan space-around.
code

1	justify-content: flex-start | flex-end | center | space-between | space-around

Align items (parent element)

Menetukan posisi flex item di sepanjang garis cross axis. Prop ini mirip fungsinya dengan justify content hanya arahnya saja yg berbeda, yaitu tegak lurus maun axis. Nilai yang ada meliputi flex-start, center, flex-end, space-between, dan space-around.
code

1	align-items: flex-start | flex-end | center | baseline | stretch

Align content (parent element)

Mengatur posisi flex line. Properties ini hanya akan berjalan jika container memiliki multi line items. Posisi flex line dapat diatur apakah merapat di awal, di akhir, di tengah atau lainnya. Nilai yang ada meliputi flex-start, center, flex-end, space-between, space-around, dan stretch.
code

1	align-content: flex-start | flex-end | center | space-between | space-around | stretch

Tutorial

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

Kalau kita simpulkan, terdapat pro dan cons menggunakan flexbox.

Pro

1. Kita tidak perlu repot-repot untuk memgatur padding dan margin untuk memberikan posisi suatu item relatif terehadap containernya. Flexbox sudah menghandle segalanya tepat seperti kemauan kamu
2. Flexbox bersifat fluid. Sangat baik untuk responsive design.

Cons

• Flexbox modules masih dalam tahap pengesahan W3C, sehingga untuk mengaplikasikannya ke dalam web browser masih harus menggunakan prefix vendor.

Yap, sampai disini kamu sudah tau mengenai basic of flexbox. Jangan khawatir, akan ada tons of flex layout yang akan menghiasi layar kamu karena flexbox masih dalam consurtium W3C dan baru akan diresmikan di awal 2014,  jadi sangatlah  penting untuk mengetahui apa yang akan menjadi teknologi di masa yang akan datang.

Sumber