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.

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

13 Februari 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat