Apa sih flexbox itu? Flexbox(lengkapnya CSS Flexible box layout itu sistem layout di CSS buat ngatur posisi dan jarak elemen supaya rapi, fleksibel, dan gampang diatur.
hari ini kita latihan di code.org lesson 12 dengan judul “organizing content with flexbox”.kita mulai dari level 2 saja. disini kita diberi step-step tentang flexbox,”Tiga langkah pertama yang biasanya kita ikuti saat menerapkan properti Flex adalah: 1) menetapkan tata letak, 2) menentukan arah aliran dan apakah item harus membungkus (wrapping), dan 3) menentukan bagaimana item harus didistribusikan. Mari kita coba dua langkah pertama: 1) menetapkan tata letak flex dan 2) menentukan arah dan pembungkus (wrapping).”
Disini sudah ada tulisan “show me how to complete this level”. Untuk mudahnya tinggal kalian ikuti langkah-langkahnya.
Di nomor 3
kita akan mengatur bagaimana akan mendefinisikan bagaimana containernya akan didistibusikan secara horizontal. Kita tinggal memasukkan justify-content di style.css lalu kita atur posisinya sesuai yang diminta,untuk valuenya ada 6 yaitu flex-start, flex-end, center, space-between, space-around, dan space-evenly.
lanjut nomor 4
Sekarang kita mengatur posisinya secara vertikal menggunakan align-items. Seperti nomor 3 tinggal kita masukkan saja align items lalu valuenya seperti gambar di atas. align-items valuenya ada 5 yaitu flex-start, flex-end, center, baseline, dan stretch.
Sekian dari saya, semoga bermanfaat dan bisa dipraktekkan. Wassalamu’alaikum warahmatullahi wabarakatuh.