Flexbox Bukan Jawaban untuk Semua Masalah Layout

Satu dua keluarga kodok, tiap hari bikin layout pakai Flexbox

Semenjak Flexbox hadir di tahun 2015, layouting menggunakan CSS semakin dipermudah. Penggunaan float yang dulu jadi momok dan saking rapuhnya untuk bikin layout yang stabil di setiap breakpoint—akhirnya punya pengganti yang lebih manusiawi. Web designer pada saat itu bersujud syukur.

Sebelum Flexbox dan Grid Eksis

Pengembang web yang mulai belajar di era 2020-an sering lupa bahwa sebelum ada Flexbox dan Grid, website tetap bisa dibangun—tapi dengan banyak akrobat di CSS. Layout-nya jalan, halamannya tampil, dengan cara yang kadang bikin geleng-geleng kepala kalau dilihat sekarang.

display: block dan inline adalah pondasi yang dipakai setiap hari, sering tanpa sadar karena memang sudah jadi default. block membuat elemen mengisi lebar penuh dan mulai dari baris baru: seperti div, section, paragraf. inline membiarkan elemen mengalir bersama teks.

inline-block adalah kombinasi keduanya. Elemen bisa mengalir seperti inline, tapi bisa ditambah width dan height. Saya masih sesekali pakai ini untuk badge atau label kecil yang tidak perlu overhead Flexbox sama sekali.

.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
}

float dulunya jadi tulang punggung layout kolom sebelum ada yang lebih baik. Sekarang penggunaannya sudah sangat sempit—paling relevan ketika teks perlu mengalir di sekitar gambar. Itu saja. Kalau kamu masih pakai float untuk mengatur kolom di project baru, itu sinyal ada yang perlu diupdate.

/* Ini satu-satunya konteks float yang masih masuk akal */
.article img {
  float: left;
  margin: 0 1rem 1rem 0;
}

display: table dulu jadi cara membuat layout kolom sebelum Flexbox ada. Salah satu kelebihannya dibanding float — tinggi kolom otomatis sama tanpa trik tambahan. Sekarang sudah hampir tidak relevan untuk layout baru, dan kalau memang butuh menampilkan data tabular, kita sudah punya elemen HTML yang tepat: table, th, dan td.

.wrapper  { display: table; width: 100%; }
.sidebar  { display: table-cell; width: 240px; }
.content  { display: table-cell; }

Kenapa Flexbox Gampang Disalahgunakan

Flexbox itu sebenarnya cara yang cukup jelas karena memang bagus untuk layout satu arah. Navbar, tombol yang perlu ditengahkan, deretan card yang mengalir ke kanan. Simple bos!

Pertanyaan yang paling sering saya pakai: saya cuma ngatur posisi di satu sumbu, kan? Kalau iya, Flexbox. Tidak perlu overthinking terlalu jauh.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

Tapi di situlah jebakannya. Bukan Flexbox-nya yang bermasalah.

Tapi begitu kamu sudah hafal, ada kecenderungan untuk terus pakai ini bahkan ketika layoutnya sudah jelas minta sesuatu yang lain. Saya pernah di kondisi itu cukup lama, dan tidak sadar kok kecanduan.

Sebetulnya tidak ada yang salah pakai Flexbox terus-terusan. Hasilnya tetap jalan, tampilan tetap oke. Yang berubah hanya satu:

Kodenya jadi lebih susah dibaca, lebih banyak wrapper yang tidak perlu, dan lebih sulit di-maintain. 

Nah, di sinilah Grid masuk.

Ketika Layout Butuh Lebih dari Satu Arah Pakailah Grid

Grid masuk ketika saya butuh kontrol atas baris dan kolom sekaligus. Bukan satu sumbu melainkan dua atau bahkan lebih. Dashboard, halaman dengan sidebar, galeri foto. Kalau kamu mulai nulis Flexbox dan tiba-tiba butuh flex-wrap di mana-mana ditambah wrapper tambahan buat ngatur tingginya, itu biasanya tanda saatnya gunakan Grid yang lebih tepat.

Yang saya suka dari Grid adalah kodenya bisa sangat literal. Kamu tulis nama areanya, kamu tentukan siapa yang mengisi area itu. Rebes. Eh, beres.

.page-layout {
  display: grid;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer  { grid-area: footer; }

Dibanding versi Flexbox yang "dipaksa" untuk hal yang sama, biasanya ada dua atau tiga wrapper tambahan yang sebenarnya tidak perlu ada. Kodenya jalan, tapi kamu yang harus nanggung kompleksitasnya setiap kali buka file itu lagi.

Soal dukungan browser, ini pertanyaan yang sering muncul beberapa tahun yang lau, tapi sekarang sudah tidak terlalu relevan. Grid sudah didukung semua browser modern sejak 2017. Kalau project kamu tidak perlu support IE11, gas aja.

Jadi, Pakai yang Mana?

Tidak ada jawaban yang benar-benar mutlak. Tapi kalau diringkas, dan menurut keyakinan saya—block dan inline untuk dasar yang ikut mengalir dalam suatu layout, inline-block untuk badge atau label kecil, float kalau teks perlu mengalir di sekitar gambar, Flexbox untuk komponent satu arah, Grid kalau sudah butuh kontrol baris dan kolom sekaligus.