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 Part8. Materi yang akan saya bahas kali ini adalah tentang flex align content.
Mengenal Display Flex Pada Bootstrap 4 Part8 tentang align content memiliki fungsi untuk menyelaraskan item fleksibel bersama-sama pada sumbu silang. Value display flex align content diantaranya start/default, end, center, between, around, atau stretch. Di bawah ini adlah contoh struktur html dengan memanfaatkan .align-content-start.
<div class="d-flex align-content-start flex-wrap bg-secondary p-2" style="height: 170px">
<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>
Maka jika teman-teman buka di browser masing-masing tampilannya akan seperti pada gambar di bawah ini.
Jika teman-teman perhatikan gambar di atas, teman-teman bisa lihat perbedaan diantara satu dengan lainnya. Nah berikut ini adalah penjelasan tentang flex align contents.
- .align-content-start = mengatur align suatu elemen di posisi awal dari suatu wadah
- .align-content-end = mengatur align suatu elemen di posisi akhir dari suatu wadah
- .align-content-center = mengatur align suatu elemen di posisi tengah dari suatu wadah
- .align-content-between = mengatur align suatu elemen di posisi antara wadah yaitu awal dan akhir
- .align-content-around = mengatur align suatu elemen di posisi awal posisi disekitar wadah
- .align-content-stretch = mengatur align suatu elemen merenggang sehingga memenuhi wadah
Demikian artikel tentang Mengenal Display Flex Pada Bootstrap 4 Part8. Pembahasan tentang display flex pada bootstrap 4 sudah saya bahas semua. Tinggal bagaimana teman-teman bisa terapkan di website kalian. Karena jika kita sudah pakai bootstrap 4, alangkah bagusnya jika kita menggunakan kelas-kelas yang sudah di sediakan oleh bootstrap 4 untuk kebutuhan tampilan website kita. Semoga dapat bermanfaat dan selamat mencoba.