Skip to main content

B.7.1.12. Flex Basis

Pada chapter ini, kita akan membahas mengenai flex-basis. Properti flex-basis dalam CSS digunakan untuk menentukan ukuran awal dari flex item sebelum ruang yang tersedia dibagikan. Dengan kata lain, flex-basismenetapkan ukuran dasar dari flex item sebelum mempertimbangkan properti flex-grow dan flex-shrink. Nilai default dari flex-basis adalah auto, yang berarti ukuran item ditentukan oleh lebar atau tinggi elemen itu sendiri.

Coba teman-teman perhatikan kode berikut:

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

Hasil dari kode di atas kurang lebih akan terlihat seperti:

Output

Sekarang, mari kita coba mengatur flex-basis untuk setiap item agar memiliki ukuran yang berbeda. Misalnya, kita ingin membuat Item-1 memiliki lebar dasar yang lebih besar daripada item lainnya.

.flex-item:nth-child(1) {
  flex-basis: 200px; /* Ukuran awal item-1 */
}

.flex-item:nth-child(2) {
  flex-basis: 100px; /* Ukuran awal item-2 */
}

.flex-item:nth-child(3) {
  flex-basis: 150px; /* Ukuran awal item-3 */
}

Dengan pengaturan di atas, hasilnya akan terlihat seperti ini:

Output

Jika kita ingin melihat bagaimana flex-basis berinteraksi dengan flex-grow dan flex-shrink, kita dapat menambahkan nilai untuk kedua properti tersebut. Misalnya:

.flex-item:nth-child(1) {
  flex-basis: 200px;
  flex-grow: 1; /* Item ini dapat tumbuh */
}

.flex-item:nth-child(2) {
  flex-basis: 100px;
  flex-grow: 2; /* Item ini tumbuh dua kali lipat dibanding item lainnya */
}

.flex-item:nth-child(3) {
  flex-basis: 150px;
  flex-shrink: 1; /* Item ini dapat menyusut */
}

Hasilnya akan terlihat seperti ini:

Output

Properti flex-basis sangat berguna untuk mengatur ukuran awal dari flex-item dalam flex-container. Dengan menggabungkan flex-basis dengan flex-grow dan flex-shrink, teman-teman dapat membuat tata letak yang responsif dan fleksibel sesuai kebutuhan desaināœØ.

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.12-flex-basis