Flex Container dan Flex Items

Menyusun beberapa elemen sejajar dalam satu baris adalah kebutuhan yang muncul di hampir setiap halaman: deretan tombol, daftar menu, atau kartu produk. Sebelum ada flexbox, kebutuhan tersebut dijawab dengan float dan perhitungan lebar yang rapuh. Flexbox menawarkan model yang lebih lugas: satu elemen induk diberi peran mengatur, dan seluruh children langsung mengikuti aturan induk tersebut. Pada Chapter ini kita mengenal dua peran utama dalam model tersebut — flex container dan flex items — beserta perubahan perilaku yang terjadi setelah display: flex diterapkan.

Menyalakan Mode Flex #

Cukup satu deklarasi untuk mengubah cara children disusun: display: flex pada elemen induk. Elemen yang menerima deklarasi tersebut disebut flex container, dan setiap direct children-nya otomatis menjadi flex item. Tidak ada class atau atribut tambahan pada items; status mereka berubah murni karena induknya.

File CSS berikut dipakai oleh demo di akhir chapter. Papan induk menjadi container, sedangkan empat kotak di dalamnya menjadi items:

.papan {
  display: flex;          /* children langsung menjadi flex items */
  width: 640px;
  padding: 12px;
  background: rgb(241, 245, 249);
}
.kotak {
  width: 150px;
  height: 60px;
  background: rgb(14, 165, 233);
  color: rgb(255, 255, 255);
  font-weight: 700;
  text-align: center;
  line-height: 60px;      /* tinggi baris sama dengan tinggi kotak */
}

Mari kita telaah aturan di atas baris demi baris:

1. Baris 3 (display: flex;): deklarasi inti. Elemen .papan kini menjadi flex container dan keempat children-nya menjadi flex items yang tersusun sejajar, bukan bertumpuk seperti block biasa.
2. Baris 4 (width: 640px;): lebar container ditetapkan 640px agar keempat item (4 × 150px = 600px) muat tanpa penyusutan, menyisakan sedikit ruang kosong setelah padding.
3. Baris 5 (padding: 12px;): jarak antara tepi container dan items, sehingga lebar efektif untuk items menjadi 616px.
4. Baris 8–10 (.kotak ukuran): setiap item berukuran tetap 150px × 60px. Pada tahap ini kita belum memakai flex-grow atau flex-shrink, sehingga ukuran items mengikuti deklarasi.
5. Baris 13 (line-height: 60px;): trik penjajaran sederhana — tinggi baris disamakan dengan tinggi kotak agar teks tampak di tengah secara vertikal.

HTML pendampingnya hanya menyusun struktur, tanpa aturan layout tambahan:

<div class="papan">
  <div class="kotak">1</div>
  <div class="kotak">2</div>
  <div class="kotak">3</div>
  <span class="kotak">Span</span>
</div>

Hasil di Browser:

Empat flex items tersusun sejajar dalam satu baris di dalam papan.
Nilai computed yang diperiksa harness: display papan = flex;
setiap item selebar 150px; span yang semula inline kini memiliki
computed display block.

Siapa yang Menjadi Flex Item #

Semua direct children dari flex container menjadi flex items, tanpa kecuali jenis elemennya. Elemen <div>, <span>, <a>, bahkan rangkaian teks polos di dalam container ikut disusun — teks tersebut membentuk anonymous flex item tersendiri. Sebaliknya, cucu elemen (grandchild) tidak otomatis menjadi item; untuk menyusunnya, elemen perantara harus menjadi flex container tersendiri (flexbox bersarang).

Perhatikan item keempat pada contoh: elemen <span> yang secara alami inline. Ketika menjadi flex item, browser melakukan blockification — computed display-nya berubah menjadi block, sehingga properti width, height, dan margin vertikal kini berlaku penuh padanya. Inilah sebabnya demo dapat memeriksa width: 150px pada sebuah span.

Perilaku yang Berubah dari Block Biasa #

Tiga perubahan paling terasa ketika container berpindah dari block ke flex:

Perubahan ketiga sering menolong: jarak margin bawah judul dan margin atas paragraf kini terhitung utuh, bukan yang terbesar di antara keduanya. Selain itu, items secara default direntangkan (stretch) mengikuti tinggi container pada cross axis — perilaku yang kita bedah pada Chapter Align Items dan Align Self .

Kedua peran ini menjadi kosakata dasar seluruh section: semua properti flexbox selanjutnya diterapkan pada container atau pada items. Langkah berikutnya adalah memahami main axis dan cross axis, dua sumbu yang menentukan arah kerja properti-properti tersebut.

.papan {
  display: flex;          /* children langsung menjadi flex items */
  width: 640px;
  padding: 12px;
  background: rgb(241, 245, 249);
}
.kotak {
  width: 150px;
  height: 60px;
  background: rgb(14, 165, 233);
  color: rgb(255, 255, 255);
  font-weight: 700;
  text-align: center;
  line-height: 60px;      /* tinggi baris sama dengan tinggi kotak */
}