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:
HTML
x
32
1
2
<html>3
<head>4
<style>5
.flex-container {6
display: flex;7
background-color: DodgerBlue;8
}9
10
.flex-container > div {11
background-color: #f1f1f1;12
margin: 10px;13
padding: 20px;14
font-size: 30px;15
}16
</style>17
</head>18
<body>19
20
<div class="flex-container">21
<div>1</div>22
<div>2</div>23
<div>3</div> 24
</div>25
26
<p>Tata Letak Fleksibel harus memiliki elemen induk dengan properti <em> tampilan </em> disetel ke <em>flex</em>.</p>27
28
<p>Elemen turunan langsung dari wadah fleksibel secara otomatis menjadi item fleksibel.</p>29
30
</body>31
</html>32
