Skip to main content

B.7.1.6. Align Items

Setelah memahami bagaimana kita bisa mengatur posisi flex-item pada main axis menggunakan properti justify-content, kini kita akan belajar bagaimana mengatur posisi flex-item pada sumbu lain, yaitu cross axis, menggunakan properti align-items.

Coba teman-teman perhatikan kode berikut:

<div class="flex-container">
  <div class="flex-item"><span class="text">Flex Item</span></div>
  <div class="flex-item"><span class="text">Flex Item</span></div>
  <div class="flex-item"><span class="text">Flex Item</span></div>
</div>

Maka hasilnya akan terlihat seperti:

Output

Di dalam flex-container dia memiliki display yang di set ke flex , ketika sebuah elemen sudah diubah display nya menjadi flex maka dia bisa memakai properti align-items untuk mengatur dan menyelaraskan child items di dalamnya dari prespektif sumbu silang (cross axis) pada main axis.

Contohnya, teman-teman ingin membuat ketika flex-item tadi berada di tengah-tengah cross axis maka teman-teman cukup set properti align-items pada flex-container menjadi center.

.flex-container {
  width: 100%;
  height: 100vh;
  background-color: #dff9e6;
  display: flex;
  gap: 1rem;
  padding: 1rem;
  box-sizing: border-box;
  align-items: center;
}

.flex-item {
  /*.......*/
}

Maka ketika flex item akan berada di tengah-tengah cross-axis:

Output

Tetapi harus di ingat ya teman-teman, sumbu silang atau cross-axis itu relatif terhadap main-axis nya. Ketika flex-direction nya row/row-reverse maka main-axis nya berada pada posisi horizontal dan cross-axis nya akan berada pada posisi vertical. Dan Ketika flex-direction nya column/column-reverse maka main-axis nya berada pada posisi vertical dan cross-axis nya akan berada pada posisi horizontal

Coba kita buktikan dengan mengubah flex-direction pada flex-container di atas:

.flex-container {
  width: 100%;
  height: 100vh;
  background-color: #dff9e6;
  display: flex;
  gap: 1rem;
  padding: 1rem;
  box-sizing: border-box;
  align-items: center;
  flex-direction: column;
}

.flex-item {
  /*.......*/
}

Maka ketika flex-item tadi akan di tampilkan dalam bentuk tumpukan (column) dan berada di tengah-tengah secara horizontal.

Output

Properti align-items memiliki beberapa nilai yang bisa di pakai, diantaranya:

  • Nilai start berfungsi untuk mengatur child items yang terdapat di dalamnya menjadi selaras dengan sumbu silang bagian awal menyesuaikan main axis yang telah di tentukan.

    Output

  • center akan membuat child items yang terkandung di dalamnya berada di posisi tengah parent container atau pembungkusnya menyesuaikan dengan main axis nya.

    Output

  • end akan membuat child items terletak pada ujung akhir cross axis atau sumbu silang.

    Output

  • stretch adalah nilai bawaan dari properti align-items . Nilai ini berfunfsi untuk mengatur semua items di dalam container agar diperluas untuk mengisi tinggi container (jika flex-direction nya adalah row) dan memperluas lebarnya (jika flex-direction nya adalah column).

    .flex-container {
      width: 100%;
      height: 100vh;
      background-color: #dff9e6;
      display: flex;
      gap: 1rem;
      padding: 1rem;
      box-sizing: border-box;
      align-items: stretch;
      flex-direction: column;
    }

    .flex-item {
      width: 125px;
      /* height: 125px; */
      background-color: #207538;
      border-radius: 0.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }

    Output

    Karena cross-axis nya berada pada posisi vertical, maka coba kita komentari height dari flex-item dan kita set align-items dari flex-container menjadi strech. Maka hasilnya akan terlihat seperti:

  • baseline berfungsi untuk menyelaraskan item di dalam sebuah flex-container, sehingga items akan disusun pada garis dasar teks dari setiap item akan berada pada garis yang sama. Perhatikan kode berikut:

    <!-- Html -->
    <div class="flex-container">
      <div class="flex-item font-48px">
        <span class="item-text">Flex Item</span>
      </div>
      <div class="flex-item">
        <span class="item-text">Flex Item</span>
      </div>
      <div class="flex-item font-84px">
        <span class="item-text">Flex Item</span>
      </div>
    </div>
    /* CSS */
    .flex-container {
      width: 100%;
      height: 600px;
      display: flex;
      align-items: flex-start;
      gap: 2rem;
      background-color: #dff9e6;
      border: 1px solid black;
    }

    .flex-item {
      width: 20%;
      min-height: 100px;
      background-color: #207538;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 24px;
    }

    .font-48px {
      font-size: 48px;
    }

    .font-84px {
      font-size: 84px;
    }

    Mula-mula, flex container di set ke flex-start dan ini akan membuat flex-item akan sejajar walaupun teks di dalamnya akan berbeda ukuran.

    Output

    Sekarang, coba kita ganti nilai pada properti align-items menjadi baseline maka flex-item akan menjadi sejajar menyesuaikan garis teks yang ada di dalam flex-item.

    /* CSS */
    .flex-container {
      width: 100%;
      height: 600px;
      display: flex;
      align-items: baseline;
      gap: 2rem;
      background-color: #dff9e6;
      border: 1px solid black;
    }

    Maka hasilnya akan berubah menjadi:

    Output

Dengan memahami berbagai nilai pada properti align-items, teman-teman dapat mengatur posisi elemen di dalam sebuah flex container secara efektif sesuai dengan kebutuhan desain. Penguasaan ini memungkinkan kita untuk menciptakan tampilan yang lebih rapih dan responsif dalam sebuah aplikasi web yang teman-teman buat dan kembangkan nantinya✨.

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.7-css-layouting/B.7.1-flexbox/B.7.1.6-align-items