11/03/2017 Ekky Ridyanto 1288 Website
Lanjut lagi kita sudah belajar cukup banyak tentang Property dari Flexbox di dalam CSS3. Untuk teman teman yang belum baca artikel sebelumnya silahkan baca pada link berikut klik disini. Nah untuk bagian ini akan menjelaskan satu property yang namanya justify-content pada Flexboxnya. Sebagai contoh misalnya saya akan mencoba untuk tidak memberikan lebar pada parent boxnya yang mana kita mau lebarnya selebar bodynya jadi kita buat sebiasa mungkin seperti berikut
Pada bagian ini ada property justify content dimana kita bisa membuat kolom childnya menyesuaikan ke tengah dengan nilai jarak kiri kanan yang sama maka kita bisa gunakan nilai center dibagian property justify contentnya seperti ini
Maka otomatis ketengah semudah itu. Jadi kita tidak perlu mengatur lebar atau pun nilai margin autonya. Selain itu kita juga bisa menggunakan flex-end untuk menampilkan semua kolom childnya berada disebelah kanan browser
Tapi urutannya dari kiri ke kanan atau dibuat float right. Berbeda bila kita gunakan reverse karena reverse kolomnya akan dimulai dari kanan ke kiri. Sebaliknya bila kita mau disebelah kiri maka kita gunakan flex-start tapi secara default nilainya flex-start yaitu kolom child berada di sebelah kiri. Ada yang lebih menarik lagi kita bisa memberikan nilai space-round
Maka dia akan otomatis menghitung sebelah kiri dan kanannya dan akan membuat jarak margin yang sama. Hasilnya seperti ini
Dan satu lagi ada space-between
dengan nilai space between maka jaraknya hanya ada diantara kotaknya saja tapi jaraknya akan hilang pada bagian kotak awal dan kotak akhirnya. Jadi teman teman bisa gunakan space-round atau space-between semuanya sangat berguna dan bisa kita implementasikan. Oke terima kasih
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More