ImagesLesson 81Preview gratis
Side-by-Side Images
Lesson ini bagian dari How To · Semua level
Ringkasan
Side-by-side images menampilkan dua gambar berdampingan untuk perbandingan atau pasangan visual. Flexbox dengan flex: 1 membagi ruang secara merata, sedangkan gap menjaga jarak. Pada layar sempit, gambar dapat ditumpuk vertikal agar tetap nyaman dilihat.
Poin kunci
- display: flex menempatkan gambar dalam satu baris.
- flex: 1 membuat kedua gambar berbagi lebar secara seimbang.
- gap memberi jarak tanpa menambah margin pada masing-masing item.
- Media query mengubah flex-direction menjadi column pada layar kecil.
- object-fit: cover menjaga gambar tetap rapi dalam kotak yang sama.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.