Latihan 1: Flexbox: Dasar — CSS
Latihan 1 dari materi Flexbox: Dasar di CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Jajarkan ketiga kotak dalam satu baris, di tengah:
- Di dalam
<style>, di bawah aturan .box, bikin aturan baru dengan selector .container.
- Isinya
display: flex; supaya kotaknya berjajar mendatar.
- Tambahkan
justify-content: center; supaya barisannya ada di tengah.
Pasang di .container (induknya), bukan di .box. Hasilnya, kotak 1, 2, dan 3 berjajar di tengah.
Hint
- Kotak-kotaknya diatur dari induknya, yaitu .container yang membungkus ketiganya. Di <style> belum ada aturan buat .container.
- display: flex menyalakan Flexbox di .container, dan justify-content: center mengumpulkan kotaknya di tengah.
- .container { display: flex; justify-content: center; }
