Hallo teman-teman Dumet School. Kembali lagi dengan saya di kursus web design. Kali ini saya akan membahas tentang Mengenal Display Flex Pada Bootstarp 4 Part1. Dimana display flex pada css berfungsi untuk menentukan bagaimana sebuah benda yang fleksibel (flex) berkembang dan menyusut memadukan ruang yang ada pada wadah fleksibel. Dengan kata lain display flex ini bisa kita gunakan untuk mengatur lebar suatu elemen atau objek dengan seflexsible mungkin. Digunakan ketika kita akan membuat website multi kolom.
Nah buat teman-teman yang tampilan htmlnya menggunakan bootstrap 4. Teman-teman bisa memanfaatkan class ini untuk memberikan display flex. Pertama saya akan jelaskan di dalam artikel tentang Mengenal Display Flex Pada Bootstrap 4 Part1 yaitu cara mengaktifkan class flex. Disini ada 2 jenis dan berikut adalah contoh scriptnya.
<div class="d-flex p-2 bg-primary">Display Flex</div> <div class="d-inline-flex p-2 bg-secondary">Display Flex Inline</div>
- .d-flex membuat sifat flex pada suatu elemen block
- .d-inline-flex membuat sifat flex pada suatu elemen inline
Jika teman-teman tampilkan di browser masing-masing maka tampilannya seperti pada gambar di bawah ini.
Nah kemudian saya akan membahas tentang direction yaitu mengatur arah flex item yang ada didalam suatu elemen dengan utilitas arah. Dalam banyak kasus, Anda dapat menghilangkan kelas horizontal di sini sebagai default browser adalah baris. Namun, Anda mungkin mengalami situasi di mana Anda perlu secara eksplisit mengatur nilai ini (seperti tata letak responsif). Dengan menggunakan.flex-row atau .flex-row.reverse dan berikut adalah contoh scriptnya.
<div class="d-flex flex-row bg-secondary mb-3 p-2">
<div class="p-2 bg-light border-right">Flex item 1</div>
<div class="p-2 bg-light border-right">Flex item 2</div>
<div class="p-2 bg-light border-right">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bg-secondary p-2">
<div class="p-2 bg-light border-right">Flex item 1</div>
<div class="p-2 bg-light border-right">Flex item 2</div>
<div class="p-2 bg-light border-right">Flex item 3</div>
</div>
- Â .flex-row untuk mengatur arah horizontal dari sebelah kiri (default browser)
- .flex-row-reverse untuk memulai arah horizontal dari sisi yang berlawanan yaitu sebelah kanan
Jika teman-teman buka di browser masing-masing maka tampilannya akan seperti pada gambar di bawah ini.
Sampai disini dulu tentang penjelasan Mengenal Display Flex Pada Bootstrap 4 Part1. Kita lanjutkan membahas tentang direction secara vertical, Justify content, dan masih banyak lagi. Semoga dapat bermanfaat dan sampai jumpa.