CSSMateri CourseNusantech Academy

Pembahasan Quiz Flexbox

By 9 Juni 2020 No Comments

1. Bagaimana elemen flexbox didefinisikan

  • position: flex;
  • display: flexbox;
  • flex: 1
  • display: flex

Pembahasan: Untuk membuat sebuah container menjadi flexbox, hal pertama yang kita lakukan adalah mendeklarasikan property display dengan nilai flex.

2. Property yang digunakan untuk mengatur ukuran flex item dengan menggunakan skala perbandingan?

  • flex-grow
  • flex-shrink
  • flex-basic
  • flex-resize

Pembahasan: Kita menggunakan property flex-grow untuk memberikan nilai pada flex item. Nilai tersebut dapat menggantikan width atau height. Tiap item yang memiliki nilai flex-grow diberi tahu untuk mengambil alih ruang sisa dari kontainernya. Misalkan kita memiliki sebuah container dengan 3 flex-item didalamnya. Setiap flex item memiliki nilai flex-grow: 1. Kondisi sama dengan tiap flex-item memiliki ukuran 33.33% dari containernya.

3. Property mana yang digunakan untuk membuat baris baru apabila item/konten melebihi kontainer?

  • flex-wrap
  • flex-start
  • flex-end
  • flex-line

Pembahasan: Dalam menggunakan flexbox, flex item juga dapat melebihi container, ini bisa terjadi ketika kita mengatur ukuran tiap flex item dan flex container dengan nilai absolut seperi pixel, centimeter, milimeter, d.l.l.
Jadi kita memakai property flex-wrap dengan nilai wrap atau wrap-reverse untuk membuat flex item yang melebihi kontainer ke baris baru.
Contoh: flex-wrap: wrap | wrap-reverse