Kontainer flex

Flexbox adalah model layout satu dimensi yang mengatur kedudukan elemen pada satu arah, baik memanjang ke samping maupun menurun ke bawah. Topik ini membahas cara mengaktifkan model tersebut melalui display: flex, perubahan status anak kontainer menjadi flex item, serta pembagian dua sumbu yang menjadi dasar seluruh properti perataan flexbox. Setelah selesai membaca, pola navigasi sederhana seperti navbar dapat dibangun tanpa satu pun properti pemosisian.

Konteks formatting flex#

Deklarasi display: flex mengubah sebuah elemen menjadi kontainer flex (flex container) dan menciptakan konteks formatting flex (flex formatting context) di dalamnya. Seluruh anak langsung kontainer otomatis menjadi flex item yang diatur oleh mesin layout flex, terlepas dari nilai display semula. Bentuk lainnya, display: inline-flex, menciptakan konteks yang sama dengan kontainer yang berperilaku inline terhadap sekitarnya. Item juga berhenti mengalami perilaku alur normal, misalnya penggabungan margin antar saudara, karena setiap item diperlakukan sebagai satu kesatuan di dalam kontainernya.

Kode berikut memuat satu kontainer dengan tiga elemen anak biasa. Dua aturan CSS kemudian mengubah induknya menjadi kontainer flex.

<div class="kontainer">
  <div class="item">Satu</div>
  <div class="item">Dua</div>
  <div class="item">Tiga</div>
</div>

.kontainer {
  display: flex;
  border: 2px solid #0b5394;
  padding: 8px;
}

.item {
  background-color: #dbeafe;
  padding: 12px 20px;
}

Tanpa display: flex, ketiga elemen di atas tersusun vertikal karena elemen block mengisi lebar induknya secara penuh. Setelah kontainernya menjadi kontainer flex, ketiganya berjejer horizontal pada satu baris dan lebarnya menyusut mengikuti isi masing-masing. Perubahan ini terjadi hanya dengan satu deklarasi pada induk, sedangkan ketiga anak tidak perlu diubah sama sekali. Sifat satu deklarasi yang mengatur seluruh kelompok inilah yang membedakan flexbox dari penjejeran dengan float atau margin negatif.

Sumbu main dan sumbu cross#

Setiap kontainer flex memiliki dua sumbu yang saling tegak lurus, yaitu sumbu main (main axis) dan sumbu cross (cross axis). Item tersusun berjejer mengikuti arah sumbu main, sedangkan sumbu cross memotongnya tegak lurus. Kedua sumbu ini bukan sumbu horizontal dan vertikal yang tetap, melainkan ditentukan oleh nilai flex-direction pada kontainer. Nilai default flex-direction adalah row, sehingga sumbu main mengarah mendatar dan sumbu cross mengarah menurun.

Diagram berikut memperlihatkan kedudukan kedua sumbu pada kontainer dengan arah default. Ketiga item menyusuri sumbu main yang mendatar, sementara panah sumbu cross menggambarkan arah tegak lurusnya dari atas ke bawah.

Konsekuensi pentingnya, arah kedua sumbu ikut berubah ketika arah layout diubah. Apabila flex-direction bernilai column, sumbu main menjadi menurun dan sumbu cross menjadi mendatar, sehingga properti yang sama bekerja pada arah yang berbeda. Properti justify-content misalnya selalu meratakan item pada sumbu main, apa pun arahnya. Kebiasaan menentukan arah kontainer terlebih dahulu sebelum menulis properti perataan mencegah kekeliruan sumbu.

Model satu dimensi#

Flexbox disebut model satu dimensi karena kontainernya mengatur item pada satu arah dalam satu waktu, yaitu sepanjang sumbu main pada satu baris flex (flex line). Model sebaliknya adalah layout dua dimensi seperti grid, yang menetapkan baris dan kolom sekaligus sehingga item dapat ditempatkan pada persilangan keduanya. Pada flexbox, perpindahan ke baris kedua hanya terjadi bila kontainer diminta melipat item melalui flex-wrap, dan item yang melipat tetap mengikuti logika satu arah. Setiap baris flex ditata terpisah, tetapi item di dalam satu baris tetap berjejer pada satu arah yang sama.

Perbedaan ini menentukan kapan flexbox dipilih. Baris menu pada navbar, kelompok tombol, dan baris kartu yang mengalir merupakan pola satu dimensi yang cocok untuk flexbox. Susunan halaman utuh dengan bilah kepala, bilah samping, isi, dan kaki halaman menuntut koordinasi dua arah sekaligus sehingga grid lebih tepat. Keduanya bukan pilihan yang saling meniadakan karena halaman yang sama sering menggabungkan keduanya, misalnya grid untuk kerangka halaman dan flexbox untuk setiap komponen di dalamnya.

Contoh nyata: navbar#

Pola yang paling sering dibangun dengan kontainer flex adalah navbar, yaitu bilah navigasi yang memuat logo dan sekumpulan tautan menu. Kedua kelompok itu ditempatkan sebagai dua flex item pada satu kontainer, lalu ruang kosong di antaranya didistribusikan dengan justify-content: space-between sehingga logo menempel kiri dan menu menempel kanan. Menu di dalamnya merupakan kontainer flex kedua yang menjejerkan tautan secara horizontal.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0b5394;
  padding: 10px 16px;
}

.menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

Demo berikut menerapkan potongan kode di atas beserta markah lengkapnya. Logo berada di ujung kiri, menu berada di ujung kanan, dan tautan menu berjejer rapi di dalam kelompoknya.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo navbar flex</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <nav class="navbar">
    <a class="logo" href="#beranda">Catatan</a>
    <ul class="menu">
      <li><a href="#harian">Harian</a></li>
      <li><a href="#mingguan">Mingguan</a></li>
      <li><a href="#arsip">Arsip</a></li>
    </ul>
  </nav>

<style>
/* Dasar demo */
body {
  font-family: system-ui, sans-serif;
  margin: 0;
  color: #1f2933;
}

/* Kontainer flex: logo dan menu menjadi flex item */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0b5394;
  padding: 10px 16px;
}

.logo {
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

/* Kontainer flex kedua: tautan menu berjejer horizontal */
.menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu a {
  color: #ffffff;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 4px;
}

/* Umpan balik tautan saat disorot */
.menu a:hover {
  background-color: #08447a;
}

</style>
<style>
/* Dasar demo */
body {
  font-family: system-ui, sans-serif;
  margin: 0;
  color: #1f2933;
}

/* Kontainer flex: logo dan menu menjadi flex item */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0b5394;
  padding: 10px 16px;
}

.logo {
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

/* Kontainer flex kedua: tautan menu berjejer horizontal */
.menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu a {
  color: #ffffff;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 4px;
}

/* Umpan balik tautan saat disorot */
.menu a:hover {
  background-color: #08447a;
}

</style></body>
</html>

Tiga deklarasi pada aturan .navbar sudah cukup untuk pola yang dulu memerlukan float atau pemosisian. Deklarasi display: flex menjadikan navbar kontainer flex, justify-content: space-between mendorong kedua itemnya ke ujung yang berlawanan, dan align-items: center menyamakan kedudukan vertikal keduanya. Kontainer .menu melakukan hal serupa untuk tautan-tautannya. Pola bersarang seperti ini lazim dijumpai, yaitu kontainer flex di dalam flex item milik kontainer lain.

Kesalahan umum#

Kesalahan pertama adalah menulis properti perataan flex pada elemen yang bukan induk langsung dari item yang ingin diatur. Deklarasi display: flex hanya mengatur anak langsungnya, sedangkan elemen yang lebih dalam tetap diatur oleh konteksnya masing-masing. Tautan di dalam butir daftar tidak ikut berjejer apabila daftarnya bukan kontainer, sehingga perbaikannya adalah memberi display: flex pada pembungkus terdekat dari elemen yang ingin diatur.

Kesalahan kedua adalah menganggap sumbu main selalu mendatar. Setelah flex-direction diubah menjadi column, properti justify-content mengatur kedudukan menurun, bukan mendatar. Pemeriksaan pertama ketika hasil perataan tidak sesuai harapan adalah arah kontainernya, bukan nilai properti perataannya.

Kesalahan ketiga adalah memusatkan elemen dengan display: flex pada dirinya sendiri. Properti perataan flex bekerja pada kontainer untuk mengatur anak-anaknya, sehingga deklarasi itu harus berada pada elemen induk. Elemen tunggal yang ingin dipusatkan perlu dibungkus, atau diatur oleh induk yang sudah menjadi kontainer flex. Cara tercepat menemukan pemilik deklarasi adalah membaca panel Styles pada DevTools, karena deklarasi yang salah tempat langsung terlihat pada elemen yang diperiksa.

Ringkasan#

• display: flex menjadikan sebuah elemen kontainer flex dan seluruh anak langsungnya flex item di dalam konteks formatting flex.
• Sumbu main dan sumbu cross ditentukan oleh flex-direction, sehingga setiap properti perataan bekerja pada arah yang bergantung nilai tersebut.
• Flexbox adalah model satu dimensi yang mengatur item pada satu arah, sedangkan grid menetapkan baris dan kolom sekaligus.
• Navbar terdiri atas dua kontainer flex bersarang yang diratakan dengan justify-content: space-between dan align-items: center.

Referensi#

• CSS flexible box layout — MDN — Halaman induk dokumentasi flexbox MDN yang merangkum seluruh properti kontainer dan item.
• Basic concepts of flexbox — MDN — Penjelasan resmi konsep kontainer flex, flex item, serta kedua sumbunya.