CSS 08: Membuat Layout Satu Dimensi dengan Flexbox

Flexbox digunakan untuk menyusun elemen dalam satu arah utama: sebuah baris atau sebuah kolom. Contoh yang cocok adalah navigasi, kumpulan tombol, dan deretan kartu.

1. Demo Flexbox Lengkap

.navigasi dan .daftar-kartu adalah flex container. Anak langsungnya menjadi flex item.

2. Main Axis dan Cross Axis

Pada flex-direction: row, main axis bergerak mendatar. Pada column, main axis bergerak vertikal. justify-content bekerja pada main axis, sedangkan align-items bekerja pada cross axis.

Navigasi memakai justify-content: space-between untuk memisahkan logo dan menu. Kartu memakai flex-direction: column, sehingga justify-content mengatur susunan vertikal isinya.

3. Gap, Wrap, dan Ukuran Item

gap memberi jarak konsisten. flex-wrap: wrap mengizinkan kartu pindah baris. flex: 1 1 220px berarti kartu boleh membesar, boleh mengecil, dan memulai perhitungan dari sekitar 220px.

Kecilkan viewport sandbox untuk melihat jumlah kartu per baris berubah otomatis.

Kesalahan yang Sering Terjadi

• Memberi justify-content pada item, padahal property itu milik container.
• Lupa bahwa flex-direction mengubah arti sumbu utama.
• Menggunakan margin pada setiap item padahal gap lebih sederhana.
• Memaksa layout dua dimensi memakai Flexbox padahal Grid lebih tepat.

Latihan

Ubah flex-direction daftar kartu menjadi column, lalu kembalikan ke row. Ubah nilai dasar 220px menjadi 300px dan amati kapan kartu pindah baris.

Ringkasan

Aktifkan Flexbox pada induk dengan display: flex. Gunakan flex-direction untuk arah, justify-content untuk main axis, align-items untuk cross axis, gap untuk jarak, dan flex-wrap untuk pindah baris.