DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja

Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

CONTAINER DAN ITEM FLEXBOX

Pelajaran ini akan membahas tentang Container dan Item dalam Flexbox, cara kerja dan penggunaannya dalam CSS 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.

👈🏼 Pengenalan flexbox
Flex-direction 👉🏼