Quiz tentang CSS Display Flex

Apa yang dimaksud dengan Flexbox dalam CSS?

• Model tata letak yang kaku

• Model tata letak yang kuat dan fleksibel

• Model tata letak yang hanya untuk gambar

• Model tata letak yang tidak responsif

Answer explanation

Flexbox adalah model tata letak yang kuat dan fleksibel, memungkinkan elemen untuk disusun secara dinamis dalam wadah. Ini memudahkan pembuatan desain responsif dan pengaturan ruang antar elemen.

Apa yang menjadi properti utama untuk menentukan elemen sebagai flex container?

• justify-content

• flex-wrap

• display: flex

• flex-direction

Answer explanation

Properti utama untuk menentukan elemen sebagai flex container adalah 'display: flex'. Dengan menggunakan nilai ini, elemen akan menjadi flex container dan dapat mengatur anak-anaknya dengan properti flex lainnya.

Apa nilai default dari properti flex-direction?

• column

• column-reverse

• row-reverse

• row

Answer explanation

Nilai default dari properti flex-direction adalah 'row', yang berarti elemen akan disusun secara horizontal dari kiri ke kanan. Pilihan lainnya seperti 'column', 'column-reverse', dan 'row-reverse' bukan nilai default.

Apa yang terjadi jika flex-wrap diatur ke 'wrap'?

• Item-item tidak akan dibungkus

• Item-item akan dibungkus ke baris berikutnya

• Item-item akan dibungkus dalam urutan terbalik

• Item-item akan disembunyikan

Answer explanation

Ketika flex-wrap diatur ke 'wrap', item-item dalam kontainer flex akan dibungkus ke baris berikutnya jika tidak muat dalam satu baris. Ini memungkinkan tata letak yang lebih responsif dan teratur.

Apa fungsi dari justify-content?

• Menentukan arah utama dari flex items

• Menentukan bagaimana flex items disejajarkan pada sumbu utama

• Mengatur ukuran item

• Mengatur tinggi container

Answer explanation

Fungsi dari justify-content adalah untuk menentukan bagaimana flex items disejajarkan pada sumbu utama. Ini mengatur distribusi ruang di antara item dalam kontainer flex, bukan mengatur ukuran atau tinggi kontainer.

Apa yang dilakukan properti align-items?

• Mengatur lebar container

• Menentukan bagaimana flex items disejajarkan pada sumbu silang

• Mengatur urutan item

• Menentukan ukuran awal item

Answer explanation

Properti align-items digunakan untuk menentukan bagaimana flex items disejajarkan pada sumbu silang (cross axis) dalam layout flexbox, sehingga pilihan yang benar adalah 'Menentukan bagaimana flex items disejajarkan pada sumbu silang'.

Apa nilai default dari align-content?

• space-around

• flex-start

• center

• flex-end

Answer explanation

Nilai default dari properti CSS 'align-content' adalah 'flex-start'. Ini berarti konten dalam kontainer fleksibel akan disusun mulai dari awal sumbu utama, sehingga pilihan yang benar adalah 'flex-start'.

Apa yang dimaksud dengan flex-grow?

• Menentukan ukuran awal item

• Menentukan seberapa banyak item akan tumbuh

• Menentukan urutan item

• Menentukan tinggi item

Answer explanation

Flex-grow adalah properti CSS yang menentukan seberapa banyak item dalam flex container akan tumbuh untuk mengisi ruang yang tersedia. Jadi, jawaban yang benar adalah 'Menentukan seberapa banyak item akan tumbuh'.

Apa yang dilakukan properti align-self?

• Mengatur lebar container

• Mengatur ukuran item

• Mengatur urutan item

• Mengatur bagaimana item disejajarkan pada sumbu silang

Answer explanation

Properti align-self digunakan untuk mengatur bagaimana item disejajarkan pada sumbu silang dalam flexbox atau grid. Ini memungkinkan penyesuaian posisi item secara individual, berbeda dari pengaturan sumbu utama.

Apa yang terjadi jika flex-shrink diatur ke 0?

• Item akan menyusut

• Item tidak akan menyusut

• Item akan tumbuh

• Item akan hilang

Answer explanation

Jika flex-shrink diatur ke 0, item tidak akan menyusut meskipun ruang tersedia. Ini berarti item akan mempertahankan ukuran aslinya dan tidak akan berkurang.