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 Part5, dimana pembahasan kali ini akan membahas tentang Grow and shrink dan Auto margins.

Flex Grow berfungsi untuk membuat lebar dari suatu elemen memenuhi semua ruangan yang tersedia. Sehingga elemen yang lain lebarnya sesuai dengan isinya. Di bawah ini adalah contoh script html dengan flex grow.

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

Mengenal Display Flex Pada Bootstrap 4 Part5

Dan untuk Flex Shrink pada bootstrap 4 berfungsi untuk membuat lebar dari suatu elemen untuk membungkus isinya ke baris baru atau mengecil dan elemen yang lain memungkinkan lebih banyak ruang untuk item flex sebelumnya dengan .w-100. Berikut adalah script html dengan flex shrink.

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

Mengenal Display Flex Pada Bootstrap 4 Part5

Mengenal Display Flex Pada Bootstrap 4 Part5 selain membahas tentang flex grow dan shrink, di bootstrap 4 juga membahas tentang flex auto margins. Flexbox dapat melakukan beberapa hal yang cukup mengagumkan ketika Anda menggabungkan perataan fleksibel dengan margin otomatis. Dengan kata lain Flex auto margins di sini berfungsi untuk memberikan suatu margin pada suatu elemen terhadap elemen lain.

Yang ditunjukkan di bawah ini adalah tiga contoh pengendali item flex melalui margin auto: Contoh elemen pertama default atau (tanpa margin auto), contoh kedua menggunakan mr-auto atau margin-right-auto yang berfungsi mendorong dua item lain atau elemen lain ke kanan dan contoh ketiga menggunakan ml-auto atau margin-left-auto yang berfungsi mendorong dua item lain atau elemen lain ke kiri . berikut ini adalah scriptnya.

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

Mengenal Display Flex Pada Bootstrap 4 Part5

Demikian artikel tentang Mengenal Display Flex Pada Bootstrap 4 Part5. Semoga dapat bermanfaat dan selamat mencoba