Modul Layout CSS Flexbox
Sebelum Modul Layout Flexbox, ada empat mode layout:
- Blokir, untuk bagian dalam halaman web
- Inline, untuk teks
- Tabel, untuk data tabel dua dimensi
- Positioned, untuk posisi eksplisit suatu elemen
Modul Layout Kotak Fleksibel berfungsi untuk mempermudah desain struktur layout responsif yang fleksibel tanpa menggunakan float atau pemosisian.
Browser Pendukung
| Google Chrome | Microsoft Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|
| 29.0 | 11.0 | 22.0 | 10 | 48 |
Elemen Flexbox
Untuk mulai menggunakan model Flexbox kita harus menentukan wadah flex terlebih dahulu.
Contoh
Wadah fleksibel dengan tiga item fleksibel:
<!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; margin: 10px; padding: 20px; font-size: 30px; } </style> </head> <body> <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> <p>Tata Letak Fleksibel harus memiliki elemen induk dengan properti <em> tampilan </em> disetel ke <em>flex</em>.</p> <p>Elemen turunan langsung dari wadah fleksibel secara otomatis menjadi item fleksibel.</p> </body> </html>
