Latihan 2: Flexbox: Dasar — CSS
Latihan 2 dari materi Flexbox: Dasar di CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Bikin navbar dengan Logo di kiri dan Menu di kanan:
- Di aturan
.nav { ... } yang sudah ada, tambahkan display: flex; sebelum }.
- Tambahkan juga
justify-content: space-between;.
space-between menempelkan item pertama ke ujung kiri dan item terakhir ke ujung kanan. Hasilnya, Logo di kiri dan Menu di kanan, dalam satu baris.
Hint
- Logo dan Menu perlu berjajar dalam satu baris, lalu dipisah ke kedua ujungnya.
- display: flex di .nav bikin keduanya berjajar. justify-content: space-between menempelkan yang pertama ke kiri dan yang terakhir ke kanan.
- .nav { padding: 16px; background: #1a1a2e; color: white; display: flex; justify-content: space-between; }