Flex Container dan Flex Items

Setiap properti Flexbox hanya bekerja pada salah satu dari dua peran: container atau item. Mengetahui siapa yang mengatur dan siapa yang diatur membuat chapter-chapter berikutnya terasa prediktabel, karena kita langsung tahu property mana yang harus ditulis di elemen mana. Pada chapter ini kita menetapkan kosakata tersebut, melihat peta properti milik masing-masing peran, dan mengenal varian display: inline-flex.

Dua Peran dalam Layout Flex #

Kata kuncinya anak langsung: hanya elemen pada tingkat pertama di dalam container yang menjadi flex item. Cucu dan buyut tidak ikut aturan Flexbox — mereka tetap menyusun kontennya dengan layout normal di dalam item masing-masing. Pola menumpuk container di dalam container (nested flex) memang strategi yang wajar, dan dibahas tersendiri menjelang akhir section ini.

Contoh paling umum adalah navigasi:

<nav class="menu-utama">
  <a href="#beranda">Beranda</a>
  <a href="#produk">Produk</a>
  <a href="#kontak">Kontak</a>
</nav>

.menu-utama {
  display: flex;
  gap: 12px;
}

Demo berikut menandai peran masing-masing pihak: bingkai putus-putus adalah container yang diberi display: flex, tiga kotak di dalamnya adalah flex item:

Mari kita telaah:

1. nav.menu-utama: elemen ini adalah flex container karena memakai display: flex. Seluruh properti penyusunan ditulis di sini.
2. Tiga <a>: mereka menjadi flex item otomatis. Tidak ada perubahan markup sama sekali.
3. gap: 12px: jarak antar item dikelola container, bukan margin pada tiap tautan.
4. Arah default: tanpa properti lain, item tersusun searah baris teks — mendatar dari kiri. Arah ini kita atur dengan flex-direction pada chapter berikutnya.

Properti Container vs Properti Item #

Property Flexbox terbagi ke dua tempat, dan tabel ini adalah peta untuk seluruh section:

Teks Anonim Juga Menjadi Flex Item #

Aturan “anak langsung” berlaku longgar: teks yang ditulis langsung di dalam container juga dianggap item, dibungkus browser menjadi anonymous flex item:

<p class="harga-menu">
  Harga mulai
  <strong>Rp25.000</strong>
  per porsi
</p>

.harga-menu {
  display: flex;
  gap: 8px;
}

Spasi putih yang hanya berisi whitespace di antara potongan teks tidak membentuk item baru; browser melewatinya.

Demo berikut memperlihatkan teks campur markup itu tersusun sebagai item-item terpisah:

Perilaku ini jarang kita incar secara sengaja — biasanya muncul sebagai efek samping saat container flex menampung teks campur markup. Kabar baiknya solusinya sederhana: bungkus tiap potongan teks dalam elemen sendiri (span) agar kontrol tetap penuh di tangan kita.

display: inline-flex #

display: flex membuat container berperilaku block: menempati lebar penuh induknya dan mendorong elemen sesudahnya ke bawah. Varian inline-flex mengaktifkan aturan flex yang sama untuk anak-anaknya, tetapi container-nya sendiri mengalir seperti inline — lebarnya mengikuti isi dan boleh berdampingan dengan elemen inline lain:

.chip-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
}

Demo berikut menempatkan dua chip inline-flex di tengah paragraf — keduanya mengalir mengikuti teks tanpa memotong alur baris:

Gunakan inline-flex untuk komponen kecil yang hidup di dalam teks — chip, badge, label — dan flex untuk pembungkus blok seperti navbar, baris kartu, atau kolom form.

Kesalahan Umum #

Ringkasan #

display: flex menunjuk satu elemen sebagai flex container, dan seluruh anak langsungnya menjadi flex item secara otomatis — termasuk teks yang dibungkus browser sebagai anonymous item. Properti Flexbox terbagi jelas: penyusunan dan perataan milik container, sedangkan besaran dan pengecualian milik item. Dengan kosakata ini siap, kita masuk ke model pikir terpenting Flexbox: dua sumbu yang menjadi panggung semua properti perataan.