Flexbox · Pelajaran 6

Misi: kartu produk Toko Nusantara berjajar

Tujuan: Pengguna dapat menyusun beberapa kartu produk berjajar yang turun baris saat layar menyempit.

±12 menitDiperiksa 2026-09-22

Halaman katalog Toko Nusantara menampilkan tiga produk. Kartunya sudah punya gaya sendiri, tetapi masih menumpuk ke bawah dan memakan layar.

Susun kartu itu berjajar, beri jarak yang sama, dan pastikan kartu turun baris kalau tidak muat.

Misi akhir modul. Selesaikan minimal 4 dari 4 tugas untuk menuntaskan modul ini.

Praktik

Ubah .rak menjadi flex container dengan flex-wrap: wrap, gap: 16px, dan align-items: stretch supaya tinggi kartu seragam.

Editor HTML & CSS

Hasil

Kode tersimpan otomatis saat kamu mengetik.

Pemeriksaan ini mencocokkan kodemu dengan instruksi latihan. Belum ada penilaian kualitas kode secara menyeluruh. Preview menjalankan HTML dan CSS saja, tanpa JavaScript.

Latihan 2 dari 4

Di dalam flex container dengan flex-direction: row, properti mana yang mengatur perataan item pada sumbu mendatar?

Jawaban diperiksa di server. Latihan ini memastikan kamu memahami contohnya — bukan bukti seluruh pekerjaanmu sudah benar.

Latihan 3 dari 4

Dengan flex-direction: row, align-items: center membuat item rata di posisi mana?

Jawaban diperiksa di server. Latihan ini memastikan kamu memahami contohnya — bukan bukti seluruh pekerjaanmu sudah benar.

Latihan 4 dari 4

Sebuah .rak selebar 960px berisi tiga kartu selebar 280px dengan gap 24px di antaranya. Berapa piksel ruang kosong yang tersisa di dalam rak?

Jawaban diperiksa di server. Latihan ini memastikan kamu memahami contohnya — bukan bukti seluruh pekerjaanmu sudah benar.

Selesaikan latihannya dulu untuk menandai pelajaran ini selesai.

Lanjutkan ke

Sumber

web.dev — Learn CSS: Flexbox (situs lain)
MDN — Properti flex-wrap (situs lain)
MDN — Properti gap (situs lain)
MDN — Properti justify-content (situs lain)

Materi kelas ini diadaptasi dari Microsoft Web Dev for Beginners — 3-terrarium (CSS layout) (MIT), web.dev — Learn CSS, Learn Forms, Learn Accessibility (CC-BY-3.0). Rincian perubahan ada di halaman kelas.