FLEX-BASIS

Pendahuluan

Flex-basis adalah sifat CSS yang digunakan dalam layout Flexbox. Sifat ini menentukan ukuran awal elemen flex sebelum ditentukan oleh sifat lainnya seperti flex-grow dan flex-shrink.

Bagaimana Cara Kerja flex-basis?

Flex-basis bekerja dengan menentukan ukuran awal dari elemen flex. Nilai defaultnya adalah auto, yang berarti bahwa browser akan mencari nilai width atau height yang ditentukan, atau akan mencoba menentukan ukuran dari konten itu sendiri.

.container {
    display: flex;
}
.item {
    flex-basis: 200px;
}

Dalam contoh di atas, .item akan memiliki ukuran awal 200px sebelum flex-grow atau flex-shrink diterapkan.

Nilai Yang Dapat Digunakan

Ada tiga nilai utama yang bisa kamu gunakan untuk flex-basis: auto, content, dan <length>.

auto

Ini adalah nilai default untuk flex-basis. Jika auto digunakan, browser akan mencari nilai width atau height yang ditentukan sebelumnya. Jika tidak ada yang ditemukan, ukuran konten akan menjadi basis untuk ukuran awal.

.item {
    flex-basis: auto;
}

content

Jika menggunakan content, browser akan mengabaikan nilai width atau height yang mungkin ditentukan sebelumnya dan langsung mengevaluasi konten elemen.

.item {
    flex-basis: content;
}

<length>

Dengan <length>, kamu bisa menentukan nilai eksplisit untuk flex-basis menggunakan unit ukuran seperti px, em, `%’, dll.

.item {
    flex-basis: 50%;
}

Dalam contoh di atas, .item akan memiliki ukuran awal setengah dari lebar total kontainer . Perhatikan bahwa dalam konteks Flexbox, % dihitung berdasarkan ruang yang tersedia di dalam kontainer dan bukan pada lebar atau tinggi absolut.