Flexbox 2: Item & Pola Layout
Mengatur perilaku tiap item dengan flex-grow, flex-shrink, flex-basis, order, align-self, dan membangun pola layout nyata seperti navbar dan footer menempel.
Properti untuk flex item
Setelah induk ber-display: flex, kamu bisa mengatur perilaku masing-masing anak:
| Properti (di item) | Fungsi |
|---|---|
flex-grow | Seberapa besar item melebar mengisi sisa ruang (0 = tidak) |
flex-shrink | Seberapa besar item mengecil bila ruang kurang (1 = boleh) |
flex-basis | Ukuran awal item sebelum tumbuh/menyusut |
flex | Singkatan grow shrink basis |
order | Mengubah urutan tampil (bawaan 0) |
align-self | Perataan sumbu silang khusus satu item |
flex-grow: berbagi sisa ruang
.sidebar { width: 200px; } /* tetap */
.konten { flex-grow: 1; } /* ambil semua sisa lebar */Jika dua item punya flex-grow: 1 dan flex-grow: 2, sisa ruang dibagi dengan rasio 1 : 2.
Singkatan flex
| Tulisan | Artinya |
|---|---|
flex: 1 | Tumbuh sama rata, basis 0: item berbagi ruang sama besar |
flex: 0 0 200px | Lebar kaku 200px (tidak tumbuh/menyusut) |
flex: auto | Mulai dari ukuran isi, boleh tumbuh dan menyusut |
Tiga kolom sama lebar
.baris { display: flex; gap: 16px; }
.baris > div { flex: 1; }margin auto di flexbox
margin-left: auto pada sebuah item mendorongnya ke ujung kanan. Cocok untuk memisahkan item terakhir di navbar:
.navbar { display: flex; align-items: center; }
.navbar .masuk { margin-left: auto; }Footer menempel di bawah
Masalah klasik: halaman pendek membuat footer "melayang" di tengah layar. Solusi flexbox:
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main { flex: 1; } /* isi utama mengisi sisa tinggi, footer terdorong ke bawah */order dan align-self
.penting { order: -1; } /* tampil paling awal */
.tinggi { align-self: flex-end; } /* hanya item ini ke bawah */order hanya mengubah tampilan visual, bukan urutan di HTML atau urutan Tab keyboard. Hati-hati demi aksesibilitas.