Section ini membahas flexbox sebagai bagian dari Course CSS. Ikuti chapter di dalamnya secara berurutan karena setiap chapter dibangun di atas pemahaman chapter sebelumnya. Gunakan demo interaktif pada setiap halaman untuk melihat langsung efek kode yang sedang dibahas.

# Pengenalan Flexbox

Kenali Flexbox sebagai modul layout satu dimensi yang menyelesaikan tiga masalah klasik CSS: tinggi kartu yang sejajar, perataan vertikal, dan navigasi yang lentur.

Buka → # Flex Container dan Flex Items

Pahami dua peran utama Flexbox — container yang mengaktifkan aturan baru dan item yang mengikutinya — beserta peta properti milik masing-masing.

Buka → # Main Axis dan Cross Axis

Kuasai model pikir terpenting Flexbox: setiap properti perataan bekerja pada main axis atau cross axis, dan kedua sumbu ini ikut berputar saat arah layout berubah.

Buka → # Flex Direction

Atur arah penyusunan flex items dengan empat nilai flex-direction — dan pahami kapan column menjadi pilihan yang tepat.

Buka → # Flex Wrap

Izinkan flex items pindah baris dengan flex-wrap — dan pahami mengapa default nowrap membuat item menyusut tanpa izin.

Buka → # Justify Content

Distribusikan sisa ruang di main axis dengan enam nilai justify-content — dari perataan sederhana hingga tiga pola space yang sering tertukar.

Buka → # Align Items

Rapikan item di cross axis dengan align-items — dari perilaku stretch yang menyamakan tinggi kartu hingga solusi centering vertikal.

Buka → # Align-Content dan Align-Self

Dua properti perataan yang sering terlupa: align-content untuk mendistribusikan baris hasil wrap dan align-self untuk pengecualian satu item.

Buka → # Gap pada Flexbox

Tutup peta penataan Flexbox dengan gap: satu deklarasi untuk jarak antar item dan antar baris, menggantikan seluruh trik margin yang penuh pengecualian.

Buka → # Flex-Grow dan Flex-Shrink

Pahami cara flex-grow membagi ruang sisa dan flex-shrink menyusutkan item, lengkap dengan hitungan konkret.

Buka → # Flex Basis

Kuasai flex-basis sebagai ukuran awal item flex, hubungannya dengan width, dan jebakan min-width: auto yang meluber.

Buka → # Shorthand Flex

Ringkas flex-grow, flex-shrink, dan flex-basis ke satu property flex, lengkap dengan empat kata kunci yang perilakunya berbeda.

Buka → # Auto Margins pada Flexbox

Dorong satu item ke ujung baris atau tengah dengan margin auto, teknik favorit untuk tombol keranjang pada navbar.

Buka → # Nested Flex Containers

Susun layout bertingkat: item flex yang sekaligus menjadi container bagi anak-anaknya sendiri, dengan sumbunya masing-masing.

Buka → # Pola Layout: Navigation

Bangun navbar lengkap dari nol: brand di kiri, menu di tengah, keranjang terdorong ke ujung dengan margin auto.

Buka → # Pola Layout: Card

Rakit deretan kartu produk yang sama tinggi dengan isi yang tumbuh dan tombol aksi menempel rapi di dasar kartu.

Buka → # Memilih Flexbox

Tutup section flexbox dengan kerangka keputusan: kapan flexbox alat yang tepat, kapan beralih ke grid, dan cara menggabungkan keduanya.

Buka →