Belajar CSS FlexBox Bagian #1 Display Flex dan Flex Direction
CSS Flexbox atau Flexible Box memudahkan kita untuk meletakkan, menyelaraskan dan mendistribusikan ruang antar item di dalam sebuah container. Kita bisa mengatur spasi atau ruang antar items.
Di flexbox kita akan mengenal container dan items, container adalah wadah atau bungkus bagi items. Untuk lebih jelasnya bisa lihat gambar di bawah ini.
Selanjutnya kita akan melihat contoh dasar penggunaan css flexbox, properti dan nilai yang diterapkan teman - teman bisa lihat gambar di bawah ini.
Gambar sebelah kiri : Secara default kotak 1 sampai kotak 4 itu memiliki properti dan nilai "display:block", sehingga semua kotak akan otomatis berada di bawah element di atasnya atau membuat baris baru.
Ketika kita menambahkan properti dan nilai "display:flex" ke container, maka posisi dari kotak 2 sampai kotak 4 akan berubah, sebaris dengan kotak 1.
items bisa ditampilkan dari kiri ke kanan, dari kanan ke kiri, dari atas ke bawah dan bawah ke atas terhadap wadah atau cotainer.
Gambar di atas adalah contoh penggunaan flex-direction, untuk gambar yang paling atas contoh penggunaan flex-direction:row, bisa kita lihat setiap kotak berurutan dari kiri ke kanan. mulai dari dari kotak1 sampai kotak 4.
Untuk gambar yang bawah, contoh penggunaan flex-direction:row-reverse - sekarang box 1 atau kotak 1 akan berada di paling kanan dan menempel ke container sebelah kanan, kemudian sebelah kirinya box2 dan seterusnya.
Gambar di atas adalah contoh penggunaan property flex-direction: column dan flex-direction: column-reverse.
Gambar yang sebelah kiri contoh dari flex-direction:column - dimana gambar akan berjejer dari atas ke bawah dari box 1 sampai box 4.
Gambar yang sebelah kanan contoh dari flex-direction : column-reverse, kotak akan berjejer dari bawah ke atas, dari box 1 sampai box 4.
Di flexbox kita akan mengenal container dan items, container adalah wadah atau bungkus bagi items. Untuk lebih jelasnya bisa lihat gambar di bawah ini.
Dari gambar di atas container adalah kotak yang berwarna kuning mentega :)
Gambar di atas adalah contoh items - kotak yang berwarna biru.
Selanjutnya kita akan melihat contoh dasar penggunaan css flexbox, properti dan nilai yang diterapkan teman - teman bisa lihat gambar di bawah ini.
1. display:flex
 |
| Contoh penggunakan display:flex - klik gambar biar lebih jelas |
Gambar sebelah kiri : Secara default kotak 1 sampai kotak 4 itu memiliki properti dan nilai "display:block", sehingga semua kotak akan otomatis berada di bawah element di atasnya atau membuat baris baru.
Ketika kita menambahkan properti dan nilai "display:flex" ke container, maka posisi dari kotak 2 sampai kotak 4 akan berubah, sebaris dengan kotak 1.
2. flex-direction
Properti flex-direction memungkinkan kita untuk mengatur atau mengontrol tampilan atau posisi items terhadap container. Secara default ketika menggunakan property display:flex, maka item akan ditampilkan dari kiri kekanan.items bisa ditampilkan dari kiri ke kanan, dari kanan ke kiri, dari atas ke bawah dan bawah ke atas terhadap wadah atau cotainer.
- Dari kiri ke kanan = flex-direction: row
- Dari kanan ke kiri = flex-direction: row-reverse
- Dari atas ke bawah = flex-direction: column
- Dari bBawah ke atas = flex-direction: column-reverse
Gambar di atas adalah contoh penggunaan flex-direction, untuk gambar yang paling atas contoh penggunaan flex-direction:row, bisa kita lihat setiap kotak berurutan dari kiri ke kanan. mulai dari dari kotak1 sampai kotak 4.
Untuk gambar yang bawah, contoh penggunaan flex-direction:row-reverse - sekarang box 1 atau kotak 1 akan berada di paling kanan dan menempel ke container sebelah kanan, kemudian sebelah kirinya box2 dan seterusnya.
Gambar di atas adalah contoh penggunaan property flex-direction: column dan flex-direction: column-reverse.
Gambar yang sebelah kiri contoh dari flex-direction:column - dimana gambar akan berjejer dari atas ke bawah dari box 1 sampai box 4.
Gambar yang sebelah kanan contoh dari flex-direction : column-reverse, kotak akan berjejer dari bawah ke atas, dari box 1 sampai box 4.
Post a Comment for "Belajar CSS FlexBox Bagian #1 Display Flex dan Flex Direction"