Penggunaan Justify Content Pada Flexbox CSS3

11/03/2017    Ekky Ridyanto    1735     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

Artikel, Web Design, HTML CSS, website