Hallo teman-teman dumet school, kembali lagi dengan saya Shelli Ripati di kursus web design. Kali ini saya masih akan membahas mengenai materi tentang bootstrap 4 yaitu Mengenal Display Flex Pada Bootstrap 4 Part4 dimana artikel sebelumnya saya sudah membahas tentang display flex, direction, justify content, align items dan kali ini yang akan saya bahas adalah display flex align self dan display flex fill. Align self ini berfungsi untuk membantu kita mengatur align pada flex item yang ada di dalam suatu wadah secara masing-masing.

Value atau nilaunya sama seperti align items yaitu ada start, center, end, baseline dan stretch. Yang membedakan align items dengan align self adalah objek yang di aturnya. Kalo align items mengatur semua flex item yang ada di dalam wadah dengan posisi align yang sama, sedangkan align self mengatur flex item masing-masing.

Untuk dapat lebih Mengenal Display Flex Pada Bootstrap 4 Part4. Teman-teman buat struktur seperti script di bawah ini.

Jika teman-teman buka di browser masing-masing maka tampilannya akan seperti pada gambar di bawah ini.

Mengenal Display Flex Pada Bootstrap 4 Part4

Selanjutnya saya akan menjelaskan fill dimana berfungsi untuk mengatur lebar flex items sama rata. Berikut scriptnya ya teman-teman bisa salin saja.

Nah jika teman-teman buka di browser masing-masing maka akan tampak seperti pada gambar di bawah ini. Dimana ada 3 flex item yang dibagi sama lebar menjadi 3 bagian di dalam wadah .bg-secondary .

Mengenal Display Flex Pada Bootstrap 4 Part4

Demikian artikel tentang Mengenal Display Flex Pada Bootstrap 4 Part4. Semoga artikel ini dapat bermanfaat untuk teman-teman. Dan selamat mencoba.