Bermain dengan Flexbox
Flashback
ada tulisan saya Mengenal CSS Flexible Box yang lalu, saya sedikit menjabarkan mengenai apa itu flexbox, kegunaan dari flexbox, konsep dasarnya dan juga salah satu propertinya yaitu align-content. Kali ini saya akan melanjutkan tulisan saya sebelumnya, masih mengenai flexbox namun dari sisi yang sedikit berbeda dan semoga lebih menyenangkan bagi kita untuk mempelajari dan mempraktekkan flexbox.
Saya belajar tentang flexbox belum lama. Ketika awal saya membaca dan mempelajarinya, saya mencoba untuk mempraktekkan penggunaan beberapa properti flexbox dan semuanya nampak mudah — memang mudah karena saya mencoba beberapa properti sambil membaca dokumentasinya. Beberapa minggu kemudian ada seorang teman yang bertanya tentang suatu kasus dan saya tahu bahwa hal tersebut bisa diselesaikan menggunakan flexbox dan apa yang terjadi kemudian? Saya harus mencari dokumentasi lagi mengenai flexbox karena apa yang sudah saya baca dan praktekkan beberapa minggu yang lalu sudah tidak ada lagi dalam ingatan saya.
Belajar sambil bermain
Ada 2 website yang saya temukan ketika mencari-cari referensi mengenai flexbox yaitu Flexbox Froggy dan Flexbox Defence.
Di permainan Flexbox Froggy kita akan membantu Froggy dan teman-teman kataknya untuk sampai diatas daun tanaman lili yang sesuai di sebuah kolam. Di permainan ini kita akan dikenalkan dan mempraktekkan beberapa properti flexbox.
Ada 24 tingkatan yang mengasah ingatan dan kemampuan kita dalam mempelajari flexbox. Berikut ini adalah tampilannya:
Permainan yang kedua adalah Flexbox Defence. Pada permainan yang kedua ini kita harus menghentikan laju musuh agar tidak melewati garis pertahanan kita. Sama seperti di permainan pertama tadi, di dalam permainan ini kita akan dikenalkan dan mempraktekkan beberapa properti flexbox.
Pada permainan ini hanya ada 12 tingkatan permainan, namun cukup menantang dan bisa membantu untuk mengingat beberapa properti flexbox. Berikut ini tampilan dari Flexbox Defence:
Pada dua permainan tersebut kita diajak untuk lebih mengenal dan mengetahui bagaimana efek suatu properti flexbox apabila dikenakan pada suatu elemen HTML. Berikut ini adalah properti beserta nilai dari properti tersebut yang bisa kita pelajari sembari bermain permainan tersebut:
# justify-content
value: flex-start | flex-end | center | space-between | space-around
# align-items & align-self
value: flex-start | flex-end | center | baseline | stretch
# flex-direction
value: row | row-reverse | column | column-reverse
# order
# flex-wrap
value: nowrap | wrap | wrap-reverse
# flex-flow
# align-content
value: flex-start | flex-end | center | space-between | space-around | stretch
Dengan memainkan permainan ini semoga proses belajar dan mengingat properti-properti flexbox menjadi lebih mudah. Selamat mencoba.
