Pertemuan 7-8: Layouting dengan Flexbox

Menguasai Layout Satu Dimensi yang Fleksibel

Pengertian

CSS Flexible Box Layout, atau biasa disebut Flexbox, adalah model layout satu dimensi yang dirancang untuk mengatur, menyelaraskan, dan mendistribusikan ruang di antara item dalam sebuah wadah (container), bahkan ketika ukurannya tidak diketahui atau dinamis. Flexbox memungkinkan kita untuk membuat layout yang kompleks dengan lebih sedikit kode dan tanpa perlu menggunakan float atau position.

Analogi

Analogi: Buku di Rak
Bayangkan sebuah rak buku sebagai flex container dan buku-buku di dalamnya adalah flex items. Dengan Flexbox, Anda adalah pustakawan yang bisa dengan mudah mengatur buku-buku tersebut: merapat ke kiri (flex-start), ke kanan (flex-end), di tengah (center), atau memberi jarak yang sama di antara setiap buku (space-between). Anda juga bisa membuat buku-buku tersebut mengisi seluruh lebar rak secara proporsional.

Contoh Kode & Hasil

1. Membuat Flex Container

Dasar dari Flexbox adalah dengan mendeklarasikan display: flex; pada elemen pembungkus.

1
2
3
.container {
  display: flex;
}

2. Properti justify-content

Mengatur perataan item secara horizontal.

1
2
.container {
  display: flex;
  justify-content: center; /* Pilihan lain: flex-start, flex-end, space-between, space-around */
}

3. Properti align-items

Mengatur perataan item secara vertikal.

1
2
.container {
  display: flex;
  height: 120px;
  align-items: center; /* Pilihan lain: flex-start, flex-end, stretch */
}

4. Properti flex-direction

Mengubah arah susunan item.

1
2
.container {
  display: flex;
  flex-direction: column; /* Default: row */
}

5. Properti flex-grow pada Item

Membuat item "tumbuh" untuk mengisi ruang yang tersedia.

1
2 (flex-grow: 1)
3
.item-tumbuh {
  flex-grow: 1;
}

Latihan Mandiri

Tugas: Membuat Navbar Sederhana

  1. Buat sebuah <nav> sebagai container.
  2. Di dalamnya, letakkan sebuah <h2> untuk logo dan sebuah <ul> untuk menu.
  3. Jadikan <nav> sebagai flex container.
  4. Gunakan justify-content: space-between; untuk mendorong logo ke kiri dan menu ke kanan.
  5. Gunakan align-items: center; untuk membuat logo dan menu sejajar secara vertikal.
  6. Jadikan <ul> sebagai flex container juga untuk menyejajarkan item-item menunya.

Kesimpulan

Flexbox adalah alat yang wajib dikuasai untuk layouting modern. Ia menyederhanakan banyak tugas yang dulunya sulit, seperti centering vertikal, membuat kolom yang sama tinggi, dan mendistribusikan ruang secara merata. Dengan memahami konsep container dan item, serta properti-properti utamanya, Anda dapat membuat layout yang bersih dan responsif dengan jauh lebih mudah.