Hallo teman-teman Dumet School. Kembali dengan saya di kursus web desaign. Kali ini saya masih akan membahas tentang Mengenal Display Flex Pada Bootstrap 4 Part6. Karena display flex ini sangat banyak sekali fungsinya jika kita sudah mengerti fungsi-fungsi yang sudah di sediakan di display flex pada bootstrap. Dan kali ini yang akan saya bahas adalah display flex With align-items dan wrap.

Display Flex With Align-items berfungsi Secara vertikal memindahkan satu item fleksibel ke bagian atas atau bawah wadah dengan mencampur item-sejajar, arah-fleksibel: kolom, dan margin-atas: otomatis atau margin-bawah: otomatis. Dan berikut adalah contoh dari penggunaan display flex with align-items.

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

Mengenal Display Flex Pada Bootstrap 4 Part6

Pada artikel Mengenal Display Flex Pada Bootstrap 4 Part6 saya juga akan membahas tentang wrap. Dimana wrap itu adalah fungsi mengubah cara flex membungkus barang dalam wadah fleksibel. Pilih dari tidak ada pembungkusan sama sekali (default browser) dengan .flex-nowrap, membungkus dengan .flex-wrap, atau membalikkan pembungkus dengan .flex-wrap-reverse.Beriku adalah contoh struktur html dengan menggunakan display flex wrap.

Jika teman-teman buka di browser masing-masing maka akan tampak seperti pada gambar di bawah ini perbedaan .flex-nowrap, .flex-wrap dan .flex-wrap-reverse.

Mengenal Display Flex Pada Bootstrap 4 Part6

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