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.

  • .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.

Mengenal Display Flex Pada Bootstrap 4 Part1

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.

  •  .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.

Mengenal Display Flex Pada Bootstrap 4 Part1

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.