Penggunaan Justify Content Pada Flexbox CSS3

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

Penggunaan-Justify-Content-Pada-Flexbox-CSS3-11-03-2017-1

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

 Penggunaan-Justify-Content-Pada-Flexbox-CSS3-11-03-2017-2

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

Penggunaan-Justify-Content-Pada-Flexbox-CSS3-11-03-2017-3

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 

Penggunaan-Justify-Content-Pada-Flexbox-CSS3-11-03-2017-4

Maka dia akan otomatis menghitung sebelah kiri dan kanannya dan akan membuat jarak margin yang sama. Hasilnya seperti ini

Penggunaan-Justify-Content-Pada-Flexbox-CSS3-11-03-2017-6

Dan satu lagi ada space-between 

Penggunaan-Justify-Content-Pada-Flexbox-CSS3-11-03-2017-5

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

11 Maret 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