Properti flex-basis

Properti flex-basis mengatur ukuran blok flex spesifik sebelum properti flex lainnya diterapkan padanya. Secara umum, properti ini mengatur ukuran elemen sepanjang sumbu utama. Ini berarti bahwa jika sumbu utama horizontal - properti ini akan mengatur lebar elemen, dan jika vertikal - maka tinggi.

Diterapkan pada blok flex spesifik.

Properti ini merupakan bagian dari properti singkatan flex.

Sintaksis

selektor {
	flex-basis: satuan CSS apa pun (dan persentase) | auto;
}

Nilai default: auto.

Contoh

Misalkan sumbu utama kita horizontal, dan flex-basis memiliki nilai 50px. Dalam hal ini lebar elemen akan menjadi 50px:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent	{
	display: flex;
	flex-direction: row; /* sumbu horizontal */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px; /* ukuran elemen */
	border: 1px solid green;
}

Contoh

Sekarang mari kita balik sumbunya, tanpa mengubah nilai properti flex-basis. Dalam hal ini tinggi elemen akan menjadi 50px:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent {
	display: flex;
	flex-direction: column; /* sumbu vertikal */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Lihat juga

properti flex-direction,
yang mengatur arah sumbu blok flex
properti justify-content,
yang mengatur perataan sepanjang sumbu utama
properti align-items,
yang mengatur perataan sepanjang sumbu silang
properti flex-wrap,
yang mengatur multi-baris blok flex
properti flex-flow,
singkatan untuk flex-direction dan flex-wrap
properti order,
yang mengatur urutan blok flex
properti align-self,
yang mengatur perataan satu blok
properti flex-grow,
yang mengatur sifat "serakah" blok flex
properti flex-shrink,
yang mengatur sifat menyusut blok flex
properti flex,
singkatan untuk flex-grow, flex-shrink dan flex-basis