Sifat flex-basis

Sifat flex-basis menetapkan saiz blok flex khusus sebelum sifat-sifat flex lain diterapkan ke atasnya. Secara umum, sifat ini menetapkan saiz elemen sepanjang paksi utama. Ini bermakna jika paksi utama mengufuk - sifat ini akan menetapkan lebar elemen, dan jika menegak - maka ketinggian.

Digunakan pada blok flex khusus.

Sifat ini merupakan sebahagian daripada sifat singkatan flex.

Sintaks

selector {
	flex-basis: sebarang unit CSS (dan peratusan) | auto;
}

Nilai lalai: auto.

Contoh

Katakan paksi utama kita mengufuk, dan flex-basis mempunyai nilai 50px. Dalam kes 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; /* paksi mengufuk */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px; /* saiz elemen */
	border: 1px solid green;
}

Contoh

Sekarang mari kita balikkan paksi, tanpa menukar nilai sifat flex-basis. Dalam kes 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; /* paksi menegak */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Lihat juga

sifat flex-direction,
yang menetapkan arah paksi blok flex
sifat justify-content,
yang menetapkan penjajaran sepanjang paksi utama
sifat align-items,
yang menetapkan penjajaran sepanjang paksi silang
sifat flex-wrap,
yang menetapkan kebolehbilangan berbilang baris blok flex
sifat flex-flow,
singkatan untuk flex-direction dan flex-wrap
sifat order,
yang menetapkan susunan blok flex
sifat align-self,
yang menetapkan penjajaran satu blok
sifat flex-grow,
yang menetapkan ketamakan blok flex
sifat flex-shrink,
yang menetapkan kebolehkecutan blok flex
sifat flex,
singkatan untuk flex-grow, flex-shrink dan flex-basis