CSS Flexbox
CSS3 Flexible box atau lebih dikenal dengan flexbox adalah mode layout yang digunakan untuk mengatur keluwesan elemen pada sebuah halaman web. Artinya, elemen-elemen tersebut bisa diatur sedemikian rupa sehingga bisa menyesuaikan ukuran layar dan diposisikan serta didistribusikan dengan jarak tertentu diantara item-item dalam sebuah container flex tersebut, bahkan ketika ukuran dari elemen tersebut tidak diketahui.
Flexbox sangat cocok digunakan untuk komponen sebuah aplikasi dan layout skala kecil. Tujuan utama penggunaan layout flex adalah untuk memberi kemampuan container agar dapat memenipulasi item-item (elemen) yang ada didalamnya, baik itu merubah tinggi dan lebar, urutan posisi elemen, dan spasi (jarak) diantara elemen tersebut.
Harap Diperhatikan: Untuk mencoba dan mengaplikasikan tutorial mengenai flexbox ini, diharapkan tidak menggunakan browser versi lama yang tidak mendukung flex.
Syntax
Penggunaan Sintaksis Flexbox
.flex-container {
display: flex | inline-flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
/* shorthand: Tulisan cepat/Kependekan */
flex-flow: <flex-direction> | <flex-wrap>;
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
.flex-items {
order: <integer>;
flex-grow: <number>; /* defaultnya adalah: 0 */
flex-shrink: <number>; /* defaulnya adalah: 1 - nilai negatif tidak berlaku*/
flex-basis: <length> | auto; /* defaultnya adalah: auto */
/* shorthand: Tulisan cepat/Kependekan */
flex: <flex-grow> | <flex-shrink> | <flex-basis> ; /* defaultnya adalah: 0 1 auto; */
align-self: auto | flex-start | flex-end | center | baseline | stretch; /* lihat: align-items */
}
Properti untuk Parent
.flex-container
Properti-properti di bawah ini digunakan hanya untuk container dari flexbox atau dengan kata lain adalah tempat dimana semua item dari flexbox itu ditempatkan.
Menentukkan container untuk flex apakah inline atau block. Inilah yang mendasari sebuah elemen akan memiliki sifat flex atau tidak.
.container {
display: flex; /* atau inline-flex */
}
Menentukkan arah (direction) yang akan diberlakukan untuk item-item yang ada pada container flexbox. Arah yang dimaksud adalah apakah ingin mengarah berbaris/horizontal (dari kiri ke kanan atau sebaliknya) atau seperti kolom/vertikal (dari atas kebawah atau sebaliknya).
.container {
flex-direction: column;
}
/*
Pilihan value-nya adalah: row | row-reverse | column | column-reverse;
*/
- row: Dari kiri ke Kanan.
- row-reverse: Dari Kanan ke Kiri (Kebalikan dari row).
- column: Dari Atas ke Bawah.
- column-reverse: Dari Bawah ke Atas (kebalikan dari column).
flex-wrap digunakan untuk mendefinisikan bahwa elemen item di dalam container flexbox tidak harus disejajarkan dalam satu baris. Artinya, elemen item tersebut digulung (dipindahkan) ke baris baru bila sudah memenuhi lebar container-nya.
.container {
flex-wrap: wrap;
}
/*
Pilihan value-nya adalah: nowrap | wrap | wrap-reverse
*/
- nowrap: Jangan digulung (dipindahkan) ke baris baru.
- wrap: Digulung (dipindahkan) ke baris baru.
- wrap-reverse: digulung (dipindahkan) ke baris baru tapi dibalik (elemen item terakhir, jadi pertama ).
flex-flow adalah kependekan (tulisan cepat) dari flex-direction dan flex-wrap sebagaimana dijelaskan tersebut diatas. Sebaiknya menggunakan kependekan ini dalam produksi design web.
.container {
flex-flow: row wrap;
}
/*
penggunaanya adalah: <flex-direction> <spasi> <flex-wrap>
*/
justify-content digunakan untuk mensejajarkan item-item diantara flexbox agar container dari flexbox tersebut bisa mendistribusikan ruang kosong yang tersisa ketika item flex dalam satu baris tersebut tidak flexsibel atau meskipun flexsibel tapi sudah mencapai batas ukuran maksimum.
.container {
justify-content: space-around;
}
/*
Pilihan value-nya adalah: flex-start | flex-end | center | space-between | space-around;
*/
- flex-start: Item flex disejajarkan dari baris pertama (kiri).
- flex-end: Item flex disejajarkan pada baris terakhir (kanan).
- center: disejajarkan ditengah-tengah baris.
- space-between: disejajarkan dengan memberi spasi diantara item, yang mana item pertama berada pada baris pertama dan item terakhir pada baris terakhir.
- space-around: disejajarkan dengan memberi spasi yang sama diantara item. spasi diantara item tersebut mungkin nampak tidak sama karena semua item memiliki spasi yang sama pada kedua sisi.
align-items mendefinisikan bagaimana item-item pada container flex tersebut diletakkan sepanjang garis tegak lurus pada sumbu utama (cross-axis). Ini sama halnya dengan justify-content tapi peletakkannya saja yang berbeda.
.container {
align-items: flex-end;
}
/*
Pilihan value-nya adalah: flex-start | flex-end | center | baseline | stretch;
*/
align-content digunakan untuk mensejajarkan garis flex container ketika ada ruang kosong secara garis tegak lurus pada sumbu utama (cross-axis). Sama halnya dengan justify-content yang mana mensejajarkan individu items pada main axis.
Harap diperhatikan: Properti ini tidak dapat diaplikasikan jika hanya terdapat satu flex item.
.container {
align-content: flex-end;
}
/*
Pilihan value-nya adalah: flex-start | flex-end | center | space-between | space-around | stretch;
*/
Contoh Lengkap
Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Flexbox Demo</title>
<style>
.flex-container {
height: 500px;
background: #ddd;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-content: center;
}
.flex-item {
width: 100px;
height: 100px;
background: tomato;
margin: 2px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item flex-item-1">flex-item 1</div>
<div class="flex-item flex-item-2">flex-item 2</div>
<div class="flex-item flex-item-3">flex-item 3</div>
<div class="flex-item flex-item-4">flex-item 4</div>
<div class="flex-item flex-item-5">flex-item 5</div>
<div class="flex-item flex-item-6">flex-item 6</div>
<div class="flex-item flex-item-7">flex-item 7</div>
<div class="flex-item flex-item-8">flex-item 8</div>
<div class="flex-item flex-item-9">flex-item 9</div>
<div class="flex-item flex-item-10">flex-item 10</div>
<div class="flex-item flex-item-11">flex-item 11</div>
<div class="flex-item flex-item-12">flex-item 12</div>
<div class="flex-item flex-item-13">flex-item 13</div>
<div class="flex-item flex-item-14">flex-item 14</div>
<div class="flex-item flex-item-15">flex-item 15</div>
</div>
</body>
</html>
SHARE