Flexbox CSS: Cara Mudah Menata Baris dan Kolom

Sampai sini kamu sudah belajar menata elemen satu per satu — warnanya, ukurannya, jaraknya, sampai teksnya. Nah, sekarang masuk ke bagian yang dulu beneran bikin pusing di CSS: tata letak, alias bagaimana cara menyusun elemen berdampingan dan saling berhubungan. Menjejer item dalam satu baris, membaginya rata, atau menaruh sesuatu pas di tengah — dulu semua ini ribet dan penuh trik-trik aneh.

Flexbox-lah yang mengubah keadaan. Ini sistem tata letak yang memang dirancang khusus untuk pekerjaan seperti itu, jadi menyusun elemen sepanjang baris atau kolom terasa jauh lebih mudah. Kalau kamu pernah berjam-jam berkutat cuma untuk menyejajarkan beberapa elemen, Flexbox-lah yang akhirnya bikin semuanya terasa pas. Yuk kita bedah.

Ide inti: sebuah container dan item-itemnya

Flexbox itu bekerja di atas dua hal: sebuah container dan item-item di dalamnya. Caranya, kamu ubah sebuah elemen jadi flex container dengan menambahkan display: flex. Begitu itu dilakukan, semua anak langsungnya otomatis berubah jadi flex item yang siap kamu atur:

.container {
  display: flex;
}

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Saat display: flex ditambahkan ke container, ketiga anaknya langsung berjejer dalam satu baris dari kiri ke kanan, bukan lagi menumpuk ke bawah. Itulah perilaku bawaannya. Dari titik ini, semua pengaturan kamu kendalikan lewat segelintir property saja — sebagian dipasang di container, sebagian lagi di item.

Arah: baris dan kolom

Secara bawaan, flex item disusun dalam satu baris dari kiri ke kanan. Kalau kamu mau mengubahnya, pakai property flex-direction:

.container {
  display: flex;
  flex-direction: row;     /* bawaan — kiri ke kanan */
  /* flex-direction: column;  — atas ke bawah */
}

Ganti ke column, maka item-nya akan menumpuk ke bawah. Inilah keputusan pertama yang perlu kamu ambil: mau menyusun elemen secara horizontal (misalnya navbar atau sederet kartu) atau vertikal (misalnya daftar bertumpuk)? Semua pengaturan setelah ini bertumpu pada pilihan tersebut.

Arah yang kamu pilih juga menentukan dua sumbu sekaligus: main axis (arah item mengalir) dan cross axis (sumbu yang tegak lurus dengannya). Pada baris, main axis itu mendatar dan cross axis-nya tegak. Bedanya ini penting, karena dua property berikutnya masing-masing mengurus satu sumbu.

Jarak sepanjang main axis: justify-content

justify-content mengatur posisi item di sepanjang main axis — kalau bentuknya baris, berarti dari kiri ke kanan. Inilah senjata utamamu untuk membagi jarak:

.container {
  display: flex;
  justify-content: space-between;
}

Nilai yang sering dipakai:

space-between ini paling sering jadi penyelamat — persis dengan cara inilah kamu menempelkan logo ke kiri dan menu ke kanan pada sebuah navbar, sementara celah di tengahnya terisi sendiri secara otomatis.

Merata di cross axis: align-items

align-items mengatur posisi item di sepanjang cross axis — kalau bentuknya baris, berarti dari atas ke bawah. Inilah cara kamu menyejajarkan item ke atas, ke bawah, atau ke tengah:

.container {
  display: flex;
  align-items: center;
}

Nilai yang tersedia ada flex-start (atas), center (tengah), flex-end (bawah), dan stretch (item meregang mengisi seluruh tinggi container — ini yang jadi bawaan). Dari semuanya, align-items: center adalah yang bakal kamu pakai berulang-ulang, karena cukup satu baris untuk menengahkan semua isi baris secara vertikal.

Trik terkenal “membuat apa pun rata tengah”

Menaruh sesuatu pas di tengah — mendatar sekaligus tegak — dulu terkenal sebagai mimpi buruk di CSS lama, sampai-sampai orang menulis artikel panjang cuma untuk membahasnya. Dengan Flexbox, cukup dua baris:

.container {
  display: flex;
  justify-content: center;   /* rata tengah horizontal */
  align-items: center;       /* rata tengah vertikal */
}

Apa pun yang ada di dalam container itu sekarang duduk pas di tengah, mendatar maupun tegak. Pola mungil ini termasuk potongan CSS yang paling sering dipakai di mana-mana, jadi sangat layak kamu hafalkan. Kapan pun kamu butuh menengahkan isi sebuah kotak, ketiga baris inilah jawabannya.

Gap dan wrapping

Ada dua property container lagi yang melengkapi dasar-dasarnya. Pertama, gap, yang menambahkan jarak rapi dan merata di antara flex item — tanpa perlu repot mengutak-atik margin:

.container {
  display: flex;
  gap: 16px;
}

Hasilnya, ada jarak 16px yang konsisten di antara setiap item — jelas lebih rapi ketimbang menempelkan margin satu per satu ke tiap anak sambil berharap tidak bentrok.

Kedua, flex-wrap, yang membiarkan item turun ke baris baru saat tidak semuanya muat, alih-alih berdesakan atau meluber keluar container:

.container {
  display: flex;
  flex-wrap: wrap;
}

Begitu wrap aktif, kalau sederet kartu jadi terlalu lebar buat layar, sisanya akan turun rapi ke baris di bawahnya, bukannya merusak tata letak. Ini bahan penting untuk desain yang bisa menyesuaikan diri dengan beragam ukuran layar.

Mengendalikan item individual

Memang sebagian besar property dipasang di container, tapi ada beberapa yang justru dipasang di item-nya langsung. Yang paling sering kepakai adalah flex, yang menentukan seberapa “rakus” sebuah item dalam mengisi ruang yang tersedia:

.sidebar {
  flex: 1;   /* mengambil 1 bagian ruang */
}

.content {
  flex: 3;   /* mengambil 3 bagian — tiga kali lebih lebar */
}

Hasilnya, area content jadi tiga kali lebih lebar dibanding sidebar, dan keduanya pas mengisi penuh container. Sebaliknya, kalau setiap item kamu beri flex: 1, mereka akan membagi ruang sama rata. Inilah rahasia di balik tata letak yang lentur dan proporsional.

Contoh nyata: sebuah navbar

Sekarang kita gabungkan semuanya jadi sesuatu yang benar-benar bakal kamu pakai di proyek nyata — sebuah bilah navigasi dengan logo di kiri dan tautan di kanan:

.navbar {
  display: flex;
  justify-content: space-between;  /* logo kiri, tautan kanan */
  align-items: center;             /* rata tengah vertikal */
  gap: 24px;
  padding: 16px;
}

<nav class="navbar">
  <div class="logo">Situsku</div>
  <div class="links">
    <a href="/">Beranda</a>
    <a href="/about">Tentang</a>
  </div>
</nav>

Hanya dengan beberapa baris, kamu sudah punya navbar yang bersih dan rapi — logo di kiri, tautan di kanan, semuanya rata tengah secara vertikal, dengan jarak yang enak dilihat. Sebelum ada Flexbox, hal seperti ini butuh float, clearfix, dan kesabaran ekstra. Sekarang? Nyaris tanpa usaha.

Penutup

Flexbox adalah alat andalan untuk tata letak satu dimensi — entah satu baris atau satu kolom — dan sekarang dasar-dasarnya sudah kamu pegang:

• Pasang display: flex pada sebuah container, dan anak-anaknya otomatis jadi flex item.
• flex-direction menentukan row (mendatar) atau column (menurun).
• justify-content mengatur posisi item di sepanjang main axis (mis. space-between, center).
• align-items mengatur posisinya di sepanjang cross axis (mis. center).
• justify-content: center + align-items: center menengahkan apa pun dengan sempurna.
• gap memberi jarak antar item dengan rapi; flex-wrap: wrap membiarkan item mengalir ke baris berikutnya.
• Di sisi item, flex mengatur seberapa besar item itu tumbuh dan berbagi ruang.

Untuk penataan dalam satu arah, Flexbox memang juaranya. Tapi begitu kamu butuh tata letak dua dimensi penuh — baris dan kolom sekaligus, layaknya kisi halaman sungguhan — ada alat yang lebih bertenaga lagi menanti. Itulah yang kita bahas berikutnya: CSS Grid, separuh lain dari dunia tata letak modern.