Latihan 2: Flexbox: Items — CSS
Latihan 2 dari materi Flexbox: Items di CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Tiga kotak biru sudah berbagi baris, masing-masing dengan flex-grow: 1. Kasih kotak 2 jatah sisa ruang dua kali lipat, biar dia jadi paling lebar:
- kotak 2 punya class
special
- bikin rule baru
.special dengan flex-grow: 2
Tulis rule .special di bawah rule .box. Kalau ditulis di atasnya, flex-grow: 1 dari .box yang menang.
Hint
- Kotak 2 punya dua class, box dan special. Lewat class special, kamu bisa mengubah kotak itu saja.
- flex-grow menentukan jatah sisa ruang. Nilai 2 dapat jatah dua kali lipat dari yang nilainya 1.
- .special { flex-grow: 2; } ditulis di bawah rule .box
