Contekan CSS Flexbox: properti dan nilai
Flexbox menata item dalam satu dimensi — baris atau kolom — dan membagi ruang di antaranya. Properti terbagi dua kelompok: yang Anda setel pada kontainer (induk flex) dan yang pada item (anak-anaknya).
Model mental: flex-direction menetapkan sumbu utama; justify-content menyelaraskan sepanjangnya, dan align-items menyelaraskan sepanjang sumbu silang yang tegak lurus.
Diperbarui 2026-07-06
Properti kontainer (induk flex)
| Properti | Nilai | Fungsinya |
|---|---|---|
| display | flex | inline-flex | Mengubah elemen menjadi kontainer flex |
| flex-direction | row | row-reverse | column | column-reverse | Arah sumbu utama |
| flex-wrap | nowrap | wrap | wrap-reverse | Apakah item membungkus ke baris baru |
| justify-content | flex-start | center | flex-end | space-between | space-around | space-evenly | Perataan sepanjang sumbu utama |
| align-items | stretch | flex-start | center | flex-end | baseline | Perataan sepanjang sumbu silang |
| align-content | flex-start | center | space-between | stretch | Meratakan baris yang membungkus (multi-baris) |
| gap | <length> (e.g. 16px) | Jarak antar item |
Properti item (anak)
| Properti | Nilai | Fungsinya |
|---|---|---|
| flex-grow | 0 | <number> | Seberapa besar item tumbuh mengisi ruang |
| flex-shrink | 1 | <number> | Seberapa besar item menyusut saat ruang sempit |
| flex-basis | auto | <length> | Ukuran awal item sebelum grow/shrink |
| flex | e.g. 1 1 0 | 1 | auto | Singkatan untuk grow, shrink, dan basis |
| align-self | auto | center | flex-start | flex-end | stretch | Menimpa align-items untuk satu item |
| order | 0 | <integer> | Menyusun ulang item secara visual (lebih kecil lebih dulu) |
Trik pemusatan paling umum: pada kontainer, setel display: flex; justify-content: center; align-items: center; untuk memusatkan anak secara horizontal dan vertikal. Untuk unit ukuran yang dipakai pada nilai-nilai ini, lihat referensi unit CSS.