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.

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

Mengenal Display Flex Pada Bootstrap 4 Part8

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.