Nested Flex Containers

Semua chapter sejauh ini melatih satu container dengan anak-anaknya yang sederhana. Layout sungguhan jarang sesederhana itu: di dalam kolom konten ada header dan deretan kartu, di dalam kartu ada gambar dan tombol, di dalam tombol ada ikon dan teks. Kabar baiknya, flexbox menangani kedalaman ini dengan aturan yang sama berulang-ulang: setiap item flex boleh sekaligus menjadi flex container bagi anak-anaknya. Chapter ini melatih cara membangun dan — lebih penting lagi — cara membaca layout bertingkat tanpa tersesat.

Setiap Container Punya Wilayahnya Sendiri #

Menjadikan seorang item sebagai container hanyalah soal memberi display: flex pada elemen anak tersebut. Yang perlu dipahami adalah pembagian tugasnya:

• Container induk memperlakukan item tersebut sebagai satu kotak utuh — ukuran, grow, shrink, dan alignment induk hanya melihat kotak luarnya, bukan isi di dalamnya.
• Item tersebut, sebagai container baru, mengatur anak-anaknya dengan property flex yang sama: flex-direction, justify-content, align-items, dan gap.
• Setiap tingkat memiliki sumbunya sendiri. Main axis container luar tidak diwarisi container dalam; container kolom di dalam container baris sepenuhnya sah dan justru menjadi pola paling umum.

Property alignment induk juga hanya menyentuh anak langsung. align-items: center pada container luar menengahkan kotak utuh kolom konten, bukan teks-teks di dalamnya; teks di dalam kolom diatur oleh container kolom itu sendiri. Aturan “satu container satu tanggung jawab” inilah yang menjaga layout bertingkat tetap terkendali.

Pola App Shell: Baris Luar, Kolom Dalam #

Pola nested yang paling sering kita temui adalah app shell: sidebar di kiri dan area utama di kanan (container baris), lalu area utama menumpuk header dan konten (container kolom). Perhatikan bagaimana dua peran itu bertemu di elemen .utama:

.aplikasi {
  display: flex;      /* tingkat 1: baris */
  gap: 16px;
  min-height: 420px;
}

.sidebar {
  width: 220px;
  flex-shrink: 0;     /* tidak boleh menyusut */
}

.utama {
  flex: 1;            /* mengisi sisa ruang baris */
  display: flex;      /* tingkat 2: kolom */
  flex-direction: column;
  gap: 16px;
}

Demo berikut memperluas pola di atas menjadi tiga tingkat: baris luar (sidebar + area utama), kolom di dalam area utama (header + konten), dan baris kartu di dalam konten:

Perkecil lebar demo dan amati kartu-kartu tetap membagi ruang secara rasio, sementara sidebar setia pada lebar tetapnya.

Mari kita telaah keputusan di balik kode tersebut:

1. .aplikasi sebagai baris: dua anak — sidebar dan area utama — disusun mendatar, jaraknya diatur gap.
2. .sidebar dengan flex-shrink: 0: sidebar berukuran tetap 220 piksel dan menolak menyusut, sesuai pembahasan chapter Flex-Grow dan Flex-Shrink.
3. .utama dengan flex: 1: basis 0% plus grow 1 membuat area utama mengisi seluruh sisa ruang tanpa dipengaruhi kontennya.
4. .utama sekaligus container kolom: header dan konten kini menumpuk vertikal di dalamnya, dengan jarak antar keduanya 16 piksel.

Membaca Layout Bertingkat #

Kunci membaca layout asing (atau milik sendiri setelah sepekan tidak disentuh) adalah berjalan dari luar ke dalam, satu container pada satu waktu. Untuk setiap container, tanyakan: arah main axis-nya apa, dan siapa saja anak langsungnya?

Tabel di atas adalah peta layout: saat satu bagian tampak salah posisi, cari container langsung tempat bagian itu tinggal, lalu periksa arah dan alignment di tingkat itu — bukan di tingkat kakeknya. Panel Layout pada browser DevTools membantu karena menampilkan sarangnya persis seperti tabel ini.

Kesalahan Umum #

Ringkasan #

Item flex boleh sekaligus menjadi flex container, dan setiap tingkat sarang membawa sumbu serta alignment-nya sendiri; induk hanya melihat kotak terluar item tersebut. Membaca layout bertingkat berarti berjalan container demi container dari luar ke dalam. Dengan teknik ini dalam genggaman, kita siap membangun komponen nyata: dua chapter berikutnya merakit pola layout yang paling sering kita temui — navigasi dan deretan kartu — dimulai dari navbar lengkap pada chapter berikutnya.