CSS FlexboxLesson 82Preview gratis
Flex Responsive
Lesson ini bagian dari CSS · Semua level
Ringkasan
Flexbox memudahkan pembuatan tata letak responsif karena arah dan pembungkusan item bisa diubah lewat media query tanpa menyentuh markup. Navigasi horizontal di layar lebar dapat ditumpuk vertikal di layar sempit hanya dengan mengganti `flex-direction`. Kombinasi `flex-wrap` dan `justify-content` membuat daftar item ikut menyesuaikan ruang yang tersedia.
Poin kunci
- `flex-direction: column` menumpuk item pada layar sempit lewat media query
- `justify-content: space-between` menyebar item dari ujung ke ujung
- `flex-wrap: wrap` membiarkan item pindah baris saat ruang terbatas
- Pendekatan mobile-first: gaya dasar untuk ponsel, `min-width` untuk layar besar
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.