Penggunaan Flex Wrap dan Flex Flow Pada CSS3

Kita lanjutkan kembali belajar tentang Flexboxnya pada CSS3. Selain property flex-direction nya kita juga dapat menggunakan flex-wrap. Misalnya pada bagian parent boxnya kita tambahkan lebar 100px dan masing masing childnya lebarnya 50px Bila teman teman hitung maka total box childnya 200px artinya lebar parent boxnya sendiri tidak cukup karena parent boxnya yaitu 100px.

Secara default nilainya nowrap maka box childnya akan menyesuaikan lebarnya berdasarkan lebar dari parent boxnya dan box childnya sendiri akan otomatis mengecil meskipun total box childnya semuanya 200px. Tentu bila saya kecilkan lagi parent boxnya kita akan dapat hasilnya seperti ini

Itu dia secara default nilai dari flex-wrap yaitu nowrap. Tapi bila saya ubah propertynya menjadi wrap 

maka nilai tersebut akan otomatis mengecek berapa lebar dari parent boxnya apakah cukup atau parentnya sudah penuh ? maka dia otomatis mengatur kolom box childnya dan berusaha seproposional mungkin. Intinya dia akan membagi lebarnya dan bila lebarnya tidak cukup lagi maka dia akan turun kebawah seperti berikut 

selain nowrap dan wrap kita juga bisa membuat wrap-reverse maka urutannya terbalik mulai dari bawah ke atas dan satu lagi bila kita ingin menggabungkan property wrap dengan directionnya kita bisa gunakan flex-flow seperti ini

yang artinya nilai pertama kita masukkan directionnya atau arah kolomnya yaitu row lalu kita pisahkan dengan spasi nilai kedua adalah wrap-reverse. Terima kasih