Mengenal Display Flex Pada Bootstrap 4 Part2

Hallo teman-teman Dumet School. Kembali lagi dengan saya Shelli Ripati di kursus web design. Saya sudah sempat membahas tentang display flex dan direction secara horizontal di bagian 1. Nah sekarang saya akan melanjutkan pembahasannya mengenai direction secara verticalÂ dan Justify content dalam artikel tentangÂ Mengenal Display Flex Pada Bootstrap 4 Part2 .

Hal yang pertama saya akan jelaskan untuk Mengenal Display Flex Pada Bootstrap 4 Part2Â yaitu direction secara vertical. Teman-teman bisa buat script seperti di bawah ini.

<div class="d-inline-flex flex-column bg-secondary mb-3">
      <div class="p-2 bg-light">Flex item 1</div>
      <div class="p-2 bg-light">Flex item 2</div>
      <div class="p-2 bg-light">Flex item 3</div>
</div>
<div class="d-inline-flex flex-column-reverse bg-secondary">
      <div class="p-2 bg-light">Flex item 1</div>
      <div class="p-2 bg-light">Flex item 2</div>
      <div class="p-2 bg-light">Flex item 3</div>
</div>

Â .flex-column untuk mengatur arah vertikal
.flex-column-reverse untuk memulai arah vertikal dari sisi yang berlawanan.

Jika teman-teman buka di browser masing-masing maka akn tampak seperti pada gambar di abwah ini.

Selanjutnya saya akan membahas tentang Justify content pada display flex yang berfungsi untuk mengubah penyelarasan item flex pada sumbu utama (sumbu x untuk memulai, y-axis jika flex-direction: kolom). Pilih dari mulai (browser default), end, center, between, atau around.

<div class="d-flex justify-content-start border-light border-bottom bg-secondary p-2">
      <div class="p-2 bg-light border-right border-left">Flex item 1</div>
      <div class="p-2 bg-light border-right border-left">Flex item 2</div>
      <div class="p-2 bg-light border-right border-left">Flex item 3</div>
</div>
<div class="d-flex justify-content-end border-light border-bottom bg-secondary p-2">
      <div class="p-2 bg-light border-right border-left">Flex item 1</div>
      <div class="p-2 bg-light border-right border-left">Flex item 2</div>
      <div class="p-2 bg-light border-right border-left">Flex item 3</div>
</div>
<div class="d-flex justify-content-center border-light border-bottom bg-secondary p-2">
      <div class="p-2 bg-light border-right border-left">Flex item 1</div>
      <div class="p-2 bg-light border-right border-left">Flex item 2</div>
      <div class="p-2 bg-light border-right border-left">Flex item 3</div>
</div>
<div class="d-flex justify-content-between border-light border-bottom bg-secondary p-2">
      <div class="p-2 bg-light border-right border-left">Flex item 1</div>
      <div class="p-2 bg-light border-right border-left">Flex item 2</div>
      <div class="p-2 bg-light border-right border-left">Flex item 3</div>
</div>
<div class="d-flex justify-content-around border-light border-bottom bg-secondary p-2">
      <div class="p-2 bg-light border-right border-left">Flex item 1</div>
      <div class="p-2 bg-light border-right border-left">Flex item 2</div>
      <div class="p-2 bg-light border-right border-left">Flex item 3</div>
</div>

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

Demikian artikel tentang Mengenal Display Flex Pada Bootstrap 4 Part2. Saya lanjutkan di pembahasan selanjutnya tentang align items dan align self. Semoga dapat bermnfaat dan selamat mencoba.

Mengenal Display Flex Pada Bootstrap 4 Part2

Kategori