Skip to main content

B.7.1.7. Align Content

Pada chapter ini kita akan membahas tentang properti align-content . Properti ini berfungsi untuk mengatur di antara baris-baris pada sebuah flex-container ketika ada ruang ekstra pada sumbu silang (cross-axis).

Coba teman-teman perhatikan kode berikut:

<div class="flex-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>

Maka hasilnya akan terlihat seperti:

Output

Terdapat nilai-nilai yang bisa digunakan untuk properti align-content diantaranya:

  • flex-start : Baris-baris akan di kelompokan di awal container.

    Output

  • flex-end : Baris-baris akan di kelompokan di akhir container.

    Output

  • center : Baris akan di kelompokan di tengah container.

    Output

  • space-between : Baris-baris akan disebar dengan jarak yang sama di antara mereka, tetapi tidak ada jarak di sekitar baris pertama dan terakhir.

    Output

  • space-around : Baris-baris akan disebar dengan jarak yang sama di antara mereka, termasuk setengah jarak di sekitar baris pertama dan terakhir.

    Output

  • space-evenly : Baris-baris akan disebar dengan jarak yang sama di antara dan di sekitar mereka.

    Output

  • stretch : Baris-baris akan direntangkan untuk mengisi ruang yang tersisa di container.

    Output

Sangat menarik bukan properti align-content ini? lebih lengkap dari align-items ya✨

Eits, tetapi harus di ingat ya teman-teman tentang perilaku bahwasannya cross-axis ini relatif terhadap main-axis nya. Yap mungkin sampai sini saja ya pembahasan di chapter ini, teman-teman bisa sesuaikan dengan kebutuhan masing-masing ya!

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.7-align-content