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
