Penggunaan Flex Wrap dan Flex Flow Pada CSS3

13/02/2017    Ekky Ridyanto    1033     Website

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.

Penggunaan-Flex-Wrap-dan-Flex-Flow-Pada-Flexbox-CSS3-13-02-2017-1

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

Penggunaan-Flex-Wrap-dan-Flex-Flow-Pada-Flexbox-CSS3-13-02-2017-2

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

Penggunaan-Flex-Wrap-dan-Flex-Flow-Pada-Flexbox-CSS3-13-02-2017-3

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 

Penggunaan-Flex-Wrap-dan-Flex-Flow-Pada-Flexbox-CSS3-13-02-2017-4

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

Penggunaan-Flex-Wrap-dan-Flex-Flow-Pada-Flexbox-CSS3-13-02-2017-5

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

HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More