Flexbox

Flexbox (Flexible Box) adalah fitur CSS3 yang mempermudah kita mendistribusi ruang kosong & mengatur ukuran elemen-elemen dalam sebuah kontainer. Jadi fungsi utamanya adalah untuk mempermudah pembuatan kontainer yang ketika ukurannya berubah, elemen di dalamnya bisa otomatis menyesuaikan ukuran & posisi.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item">1</div>
      <div class="flex-item">2</div>
      <div class="flex-item">3</div>
      <div class="flex-item">4</div>
      <div class="flex-item">5</div>
      <div class="flex-item">6</div>
      <div class="flex-item">7</div>
      <div class="flex-item">8</div>
    </div>
  </body>
</html>

Untuk bikin flexbox kita cukup pakai display:flex.

index.css
html,
body {
  padding: 0;
  margin: 0;
}

.flex-container {
  display: flex;
  outline: 1px solid green;
  background: lightgreen;
  margin-bottom: 12px;
}

.flex-item {
  background: lightyellow;
  padding: 12px;
  outline: 1px solid orange;
}

Justify Content

Secara default, posisi elemen-elemen di dalam kontainer adalah rata kiri, mirip kalo kita bikin elemen float. Selain itu lebarnya juga tetap, nggak berubah.

Kita pakai properti justify-content untuk ngatur posisi elemen-elemennya. Kalo kita mau elemennya ngumpul di tengah, pakai center. Kalo mau rata kanan, flex-end (lawannya flex-start). Kalo mau rata kiri & kanan plus spasi kosong terdistribusi merata di antara elemen, pakai space-between. Kalo mau spasi kosong terdistribusi merata di antara elemen, nggak perlu rata kiri/kanan, pakai space-around atau space-evenly (dua ini mirip tapi sedikit beda di distribusi spasinya).

index.css
.flex-container {
  //... kode sebelumnya
  justify-content: space-between;
}

Direction

Secara default, kontainer flexbox itu layoutnya horizontal. Kalo kita mau bikin layout yang bentuknya kolom, kita pake properti flex-direction: column.

index.css
.flex-container {
  display: flex;
  outline: 1px solid green;
  background: lightgreen;
  margin-bottom: 12px;
  justify-content: space-evenly;
  flex-direction: column;
  height: 400px;
}

Kenapa kontainernya selebar itu? Karena kontainer dengan display:flex bersifat block-level. Kalo kita ingin kontainernya sesuai ukuran konten/elemen di dalamnya, kita pake display: inline-flex.

Align Items

Properti align-items kita pake untuk mengatur elemen dalam kontainer dengan layout tegak lurus dengan flex-direction. Kalo direction-nya row (default), align-items mengatur layout vertikal elemennya. Kalo direction-nya column, yang diatur adalah layout horizontalnya.

index.css
.flex-container {
  display: flex;
  outline: 1px solid green;
  background: lightgreen;
  margin-bottom: 12px;
  justify-content: space-evenly;
  height: 200px;
  align-items: flex-start;
}

Properti align-items nilainya bisa: flex-start, flex-end, center, atau stretch (default).

Dulu sebelum ada flexbox, untuk membuat 2 div atau lebih yang tingginya sama biarpun isinya beda, kita harus pake trik lumayan rumit yang namanya Sliding Doors. Sekarang tinggal pake display:flex, otomatis tinggi div di dalamnya jadi sama (full-height).

Kalo dipake untuk flex-direction: column, hasilnya begini. Sama aja, cuma beda arahnya.

Wrap

Secara default, kontainer flex akan mengatur posisi elemen di dalamnya supaya cukup dalam 1 baris atau 1 kolom. Tapi kita juga bisa buat kontainer yang elemennya dipindah ke bawah atau ke samping kalo lebar kontainernya nggak cukup menampung semuanya. Untuk itu kita pake properti flex-wrap. Nilainya bisa wrap, reverse-wrap, atau nowrap (default).

index.css
.flex-container {
  display: flex;
  outline: 1px solid green;
  background: lightgreen;
  margin-bottom: 12px;
  justify-content: space-between;
  width: 160px;
  flex-wrap: wrap;
}

Gap

Untuk mengatur spasi antar elemen, kita bisa pake margin seperti elemen di luar flex, atau pake properti column-gap & row-gap. Yang pertama mengatur spasi horizontal (antar kolom). Yang kedua, untuk spasi vertikal (antar baris).

index.css
.flex-container {
  //...kode sebelumnya
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 10px; 
}

Baris 9-10 di atas bisa ditulis gap: 10px atau gap: 10px 10px.

Flex Item

Contoh di atas semuanya mengatur layout lewat kontainernya. Apa ada properti flexbox yang bisa dipake untuk elemen di dalamnya? Ada dong, yang paling sering dipake namanya flex-grow, flex-shrink, & flex-basis.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item">One</div>
      <div class="flex-item">Two</div>
      <div class="flex-item">Three</div>
      <div class="flex-item">Four</div>
    </div>
  </body>
</html>
index.css
.flex-container {
  display: flex;
  outline: 1px solid green;
  background: lightgreen;
  margin-bottom: 12px;
  height: 40px;
  width: 100%;
}

.flex-item {
  background: lightyellow;
  outline: 1px solid orange;
}

Basis

Properti flex-basis dipake untuk mendefinisikan ukuran default, bisa lebar atau tinggi tergantung flex-direction, sebuah flex-item sebelum ada transformasi karena perubahan ukuran kontainer atau aplikasi justify-content. Nilai flex-basis dipake untuk tinggi elemen kalo kontainernya pake flex-direction: column, sementara untuk flex-direction: row (default) dia dipake untuk lebar elemen.

Kita juga bisa pake width & height tapi lebih disarankan pake flex-basis karena prioritasnya lebih tinggi. Kalo kita kasih width (atau height) & flex-basis, yang menang flex-basis biarpun deklarasinya di atas width atau height.

index.css
.flex-item {
  background: lightyellow;
  outline: 1px solid orange;
  flex-basis: 100px;
  width: 40px; /* diabaikan krn ada flex-basis */
}

Kalo lebar containernya berkurang, ukuran flex-item ikut menyesuaikan. Jadi flex-basis & width itu nggak fixed. Kalo kontainer menyempit, lebar flex-item juga ikut menyesuaikan.

Grow

Properti flex-grow kita pake untuk menentukan porsi atau rasio distribusi spasi kosong yang ada. Kalo kita tulis flex-grow: 1, berarti elemen yang bersangkutan akan mendapat satu bagian dari spasi kosong. Kode di bawah artinya semua elemen dengan kelas flex-item dapat bagian sama rata.

index.css
.flex-item {
  background: lightyellow;
  outline: 1px solid orange;
  flex-basis: 100px;
  flex-grow: 1; 
}

Kita bisa buat elemen tertentu dapat porsi lebih besar daripada yang lain. Misalnya, elemen kedua kita kasih 4 bagian. Maka spasi kosongnya dibagi dengan rasio: 1/4/1/1. Jadi spasinya dibagi 7 bagian, 4 bagian dikasih ke elemen kedua, sisanya dibagi rata untuk elemen yang lain.

index.css
.flex-item:nth-child(2) {
  flex-grow: 4; /* item kedua dapat 4 bagian */
}

Yang perlu diingat flex-grow ini rasio pembagian ruang kosong. Jadi kalo proporsinya 1/4/1/1 bukan berarti elemen kedua lebarnya 4x elemen yang lain. Selain itu, sama seperti flex-basis & width, pembagian rasio ini nilainya nggak fixed. Tergantung ukuran dari kontainernya. Kalo kontainernya nggak cukup lebar, bisa jadi rasio pembagiannya diabaikan.

Shrink

Kalo kontainernya nggak cukup, ukuran item otomatis menyusut supaya semua bisa masuk. Properti ini dipake untuk menentukan rasio penyusutan sebuah elemen ketika lebar/tinggi-nya berubah. Jadi kebalikan dari flex-grow.

index.css
.flex-item {
  background: lightyellow;
  outline: 1px solid orange;
  flex-basis: 400px; /* terlalu lebar, otomatis semua elemen disesuaikan */
  flex-shrink: 1; /* default */
}

.flex-item:nth-child(2) {
  flex-shrink: 2;
}

.flex-item:nth-child(4) {
  flex-shrink: 3;
}

Properti flex-grow, flex-shrink & flex-basis bisa ditulis pake shortcut flex: <grow> <shrink> <basis>. Jadi nggak perlu satu-satu.

Membatasi Grow & Shrink

Kalo misalnya kita ingin flex-item punya ukuran minimal dan maksimal, kita bisa pake properti min-width & max-width yang juga bisa kita pake untuk elemen biasa (bukan flexbox).

index.css
.flex-item:nth-child(4) {
  flex-shrink: 3;
  min-width: 120px;
}

.flex-item:first-child {
  max-width: 120px;
}

Kode di atas artinya, lebar elemen ke-4 nggak akan kurang dari 120px & lebar elemen pertama nggak akan lebih dari 120px;

Kedua properti ini jadi semacam hard-limit & nggak akan diabaikan biarpun misalnya kontainernya nggak cukup.

Sekian. Semoga bermanfaat.

Also in this category ...


Leave a Reply

Your email address will not be published. Required fields are marked *