CSS Flexbox
1
2
3
4
5
6
7
8
Modul Tata Letak Flexbox CSS
Sebelum modul Tata Letak Flexbox, ada empat mode tata letak:
- Blokir, untuk bagian di halaman web
- Sebaris, untuk teks
- Tabel, untuk data tabel dua dimensi
- Diposisikan, untuk posisi eksplisit suatu elemen
Modul Tata Letak Kotak Fleksibel, memudahkan perancangan struktur tata letak responsif yang fleksibel tanpa menggunakan float atau positioning.
Dukungan Peramban
Properti flexbox didukung di semua browser modern.
29.0 | 11.0 | 22.0 | 10 | 48 |
Elemen Flexbox
Untuk mulai menggunakan model Flexbox, Anda harus mendefinisikan wadah fleksibel terlebih dahulu.
1
2
3
Elemen di atas mewakili wadah fleksibel (area biru) dengan tiga item fleksibel.
Contoh
Wadah fleksibel dengan tiga item fleksibel:
<div
class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Anda akan mempelajari lebih lanjut tentang wadah fleksibel dan item fleksibel di bab berikutnya.