Hallo teman-teman Dumet School. Kembali dengan saya shelli ripati di kursus web desaign. Kali ini saya masih akan membahas tentang Mengenal Display Flex Pada Bootstrap 4 Part7.  Dimana pembahasan kali ini masih seputar display flex pada bootstrap 4. Display Flex yang disediakan oleh bootstrap sangat membantu kita sekali dalam pembuatan website. Karena bootstrap menyiapkan banyak sekali macem-macem kelas flex dalam mengatur tata letak atau posisi suatu elemen dengan mudah.

Mengenal Display Flex Pada Bootstrap 4 Part7 yang akan saya bahas adalah flex order. Dimana flex order ini berfungsi untuk kita dapat mengatur posisi atau urutan tataletak dari suatu elemen atau objek. Untuk penulisannya teman-teman cukup tambahkan .order-* . Dimana symbol (*) menunjukan nilai yang berupa integer yang mendefinisikan suatu urutan dari elemen tersebut. Urutan disini dimulai dari angka 0-12.

Oke teman-teman, berikut ini adalah contoh struktur html yang memanfaatkan fungsi .order-* pada bootstrap 4. Teman-teman bisa salin scriptnya di bawah ini.

Nah jika sudah, teman-teman bisa buka di browser masing-masing. Maka hasilnya akan tampak seperti pada gambar di bawah ini.

Mengenal Display Flex Pada Bootstrap 4 Part6

Jika disini teman-teman perhatikan posisi tataletak dari flex item maka yang diperlihatkan pada gambar diatas adalah urutan tataletak dari elemen flex item sesuai dengan .order-* .

Demikian artikel tentang Mengenal Display Flex Pada Bootstrap 4 Part7. Diartikel selanjutnya yaitu part 8 adalah materi display flex terakhir yang akan saya bahas. Dimana materi yang akan saya bahas di pembahasan bagian delapan atau part 8 adalah align content. Semoga artikel ini dapat bermanfaat dan buat teman-teman yang penasaran bisa langsung mencobanya. Selamat mencoba ya teman-teman dan sampai ketemu lagi di pembahasan display flex bagian delapan.