Belajar CSS FlexBox Justify Content #Bagian2
Di postingan sebelumnya kita sudah mempelajari properti display:flex dan flex-direction, teman - teman bisa kunjungi disini. Di postingan ini kita akan membahas properti justify-content.
Tapi sebelumnya teman - teman bisa lihat gambar di bawah ini, karena gambar ini merupakan acuan dari flexible box.
Ada 4 nilai dari properti justify-content, yaitu flex-start, flex-end,center, space-between,space-around.
Gambar di atas merupakan contoh penggunaan justify-content:flex-start. Ketika nilai dari justify-content adalah flex-start maka item pertama akan rata dengan awal, atau rata dengan container sebelah kiri atau nempel ke sisi container sebelah kiri.
Ketika nilai justify-content:flex-end, maka item yang terakhir akan menempel dengan container sebelah kanan, atau rata degan sebelah kanan, tapi urutan box tetap dimulai dari box1 di paling kiri dan box 4 di ujung kanan. Berbeda dengan flex-direction:row-inverse yang mana box 1 akan berada di ujung paling kanan.
Selanjutnya jika property justify-content:center, maka semua box akan berada di tengah container untuk baris elemen tersebut.
Space-between mendistribusikan item sehingga item pertama rata dengan awal dan yang terakhir rata dengan akhir.
space-around serupa tetapi item memiliki ruang setengah ukuran di kedua ujungnya.
Berikut soure codenya dari gambar di atas.
Demikian penjelasan tentang css flexbos - justify-content. Jika ada penjelasan yang salah atau ada pertanyaan, silahkan komen di kolom komentar.
Tapi sebelumnya teman - teman bisa lihat gambar di bawah ini, karena gambar ini merupakan acuan dari flexible box.
justify-content
Justify-content adalah properti untuk menyelaraskan item dalam wadah di sepanjang sumbu utama atau main-axis. atau dengan kata lain mendistribusikan sisa ruang bebas tambahan ketika semua item fleksibel pada saluran tidak fleksibel, atau fleksibel tetapi telah mencapai ukuran maksimumnya.Ada 4 nilai dari properti justify-content, yaitu flex-start, flex-end,center, space-between,space-around.
Langsung saja kita lihat gambar di bawah ini.
 |
| flexbox - justify-content - klik gambar jika kurang jelas |
Gambar di atas merupakan contoh penggunaan justify-content:flex-start. Ketika nilai dari justify-content adalah flex-start maka item pertama akan rata dengan awal, atau rata dengan container sebelah kiri atau nempel ke sisi container sebelah kiri.
Ketika nilai justify-content:flex-end, maka item yang terakhir akan menempel dengan container sebelah kanan, atau rata degan sebelah kanan, tapi urutan box tetap dimulai dari box1 di paling kiri dan box 4 di ujung kanan. Berbeda dengan flex-direction:row-inverse yang mana box 1 akan berada di ujung paling kanan.
Selanjutnya jika property justify-content:center, maka semua box akan berada di tengah container untuk baris elemen tersebut.
Space-between mendistribusikan item sehingga item pertama rata dengan awal dan yang terakhir rata dengan akhir.
space-around serupa tetapi item memiliki ruang setengah ukuran di kedua ujungnya.
Berikut soure codenya dari gambar di atas.
Demikian penjelasan tentang css flexbos - justify-content. Jika ada penjelasan yang salah atau ada pertanyaan, silahkan komen di kolom komentar.
Post a Comment for "Belajar CSS FlexBox Justify Content #Bagian2"