CONTAINER DAN ITEM FLEXBOX

Flexbox atau Flexible Box adalah model layout CSS yang dirancang untuk merespons ukuran layar dan perubahan ukuran viewport. Flexbox terdiri dari dua komponen utama: Container dan Item. Dalam artikel ini, kita akan membahas tentang kedua komponen ini.

Container

Container adalah elemen induk atau luar dalam Flexbox. Saat kita mendefinisikan display: flex pada elemen, elemen tersebut menjadi flex container. Semua elemen anaknya (direct child) secara otomatis menjadi flex items.

Fitur yang bisa kamu gunakan pada flex container adalah sebagai berikut:

• flex-direction: Properti ini digunakan untuk menentukan arah item flex. Nilainya bisa row (default), row-reverse, column, atau column-reverse.
• justify-content: Digunakan untuk menyelaraskan item flex secara horizontal. Nilainya bisa flex-start (default), flex-end, center, space-between, space-around, atau space-evenly.
• align-items: Digunakan untuk menyelaraskan item flex secara vertikal. Nilainya bisa stretch (default), flex-start, flex-end, center, atau baseline.
• flex-wrap : Digunakan untuk menentukan jika item flex harus membungkus atau tidak. Nilainya bisa nowrap (default), wrap, atau wrap-reverse.

.container {
  display: flex; /* Membuat elemen menjadi flex container */
  flex-direction: row; /* Mengatur arah item flex */
  justify-content: space-around; /* Menyelaraskan item flex secara horizontal */
  align-items: center; /* Menyelaraskan item flex secara vertikal */
}

Item

Item biasanya adalah elemen-anak atau elemen di dalam container. Setiap item flex memiliki properti yang dapat digunakan untuk mengontrol ukuran dan urutan item tersebut.

Beberapa properti yang bisa kamu gunakan adalah:

• flex-grow: Properti ini menentukan berapa banyak ruang yang tersedia di dalam container yang akan digunakan oleh item. Sebagai contoh, jika semua item memiliki flex-grow 1, maka semua item akan membagi ruang yang tersisa di dalam container secara merata.
• flex-shrink: Ini adalah kebalikan dari flex-grow. Properti ini menentukan seberapa banyak item harus menyusut jika tidak ada cukup ruang di dalam container.
• flex-basis: Properti ini digunakan untuk menetapkan ukuran default sebelum item dibagi ruang yang tersisa dalam container.
• flex: Digunakan untuk menentukan flex-grow, flex-shrink, dan flex-basis sekaligus. Nilai defaultnya adalah 0 1 auto.
• order: Properti ini digunakan untuk mengontrol urutan item flex dalam flex container. Nilai defaultnya adalah 0.

.item {
  flex: 1; /* Membagi ruang yang tersisa di dalam container secara merata ke semua item */
  order: 2; /* Mengatur urutan item */
}

Penggunaan container dan item dalam Flexbox memudahkan proses desain tata letak yang responsif dan fleksibel. Cobalah bermain-main dengan kode dan lihat bagaimana item dan container dapat diatur dalam berbagai cara untuk mencapai tata letak yang diinginkan.