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.
<div class="d-flex align-items-start flex-column bg-secondary mb-3 p-2" style="height: 200px;"> <div class="mb-auto p-2 bg-light border-bottom">Flex item</div> <div class="p-2 bg-light border-bottom">Flex item</div> <div class="p-2 bg-light border-bottom">Flex item</div> </div> <div class="d-flex align-items-end flex-column bg-secondary mb-3 p-2" style="height: 200px;"> <div class="p-2 bg-light border-bottom">Flex item</div> <div class="p-2 bg-light border-bottom">Flex item</div> <div class="mt-auto p-2 bg-light border-bottom">Flex item</div> </div>
Dan jika teman-teman buka di browser masing-masing maka akan tampil seperti pada gambar di bawah ini.
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.
<div class="d-flex flex-wrap bg-secondary p-2">
<div class="p-2 border bg-light">Flex item 1</div>
<div class="p-2 border bg-light">Flex item 2</div>
<div class="p-2 border bg-light">Flex item 3</div>
<div class="p-2 border bg-light">Flex item 4</div>
<div class="p-2 border bg-light">Flex item 5</div>
<div class="p-2 border bg-light">Flex item 6</div>
<div class="p-2 border bg-light">Flex item 7</div>
<div class="p-2 border bg-light">Flex item 8</div>
<div class="p-2 border bg-light">Flex item 9</div>
<div class="p-2 border bg-light">Flex item 10</div>
<div class="p-2 border bg-light">Flex item 11</div>
<div class="p-2 border bg-light">Flex item 12</div>
<div class="p-2 border bg-light">Flex item 13</div>
<div class="p-2 border bg-light">Flex item 14</div>
<div class="p-2 border bg-light">Flex item 15</div>
<div class="p-2 border bg-light">Flex item 16</div>
<div class="p-2 border bg-light">Flex item 17</div>
<div class="p-2 border bg-light">Flex item 18</div>
<div class="p-2 border bg-light">Flex item 19</div>
<div class="p-2 border bg-light">Flex item 20</div>
<div class="p-2 border bg-light">Flex item 21</div>
<div class="p-2 border bg-light">Flex item 22</div>
<div class="p-2 border bg-light">Flex item 23</div>
<div class="p-2 border bg-light">Flex item 24</div>
<div class="p-2 border bg-light">Flex item 25</div>
</div>
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.
Demikian artikel tentang Mengenal Display Flex Pada Bootstrap 4 Part6. Semoga dapat bermanfaat dan selamat mencoba.