Saiz Elemen Fleks Sepanjang Paksi Utama

Sifat width dan height menentukan lebar dan tinggi elemen fleks tanpa bergantung pada arah paksi. Iaitu, jika paksinya mendatar, maka width akan menentukan lebar, tetapi jika paksinya menegak, maka width masih akan menentukan lebar. Kadang-kadang tingkah laku sedemikian tidak selesa.

Dalam model fleks, terdapat sifat khas flex-basis, yang menentukan saiz elemen sepanjang paksi utama. Ini bermaksud jika paksi utama mendatar - sifat ini akan menentukan lebar elemen, dan jika menegak - maka tinggi. Sifat ini perlu ditetapkan pada elemen fleks itu sendiri, bukan pada induknya. Mari kita lihat pada contoh.

Katakan sekarang paksi utama mendatar, 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 mendatar */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;   /* saiz elemen */
	border: 1px solid green;
}

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;
}

Buat 5 blok fleks. Tetapkan lebar mereka sepanjang paksi utama kepada 100px. Perhatikan tingkah laku blok sepanjang paksi yang berbeza.

Jika paksi mendatar dan blok telah ditetapkan sifat flex-basis dan secara serentak sifat width, maka flex-basis akan mempunyai keutamaan. Semak ini.

Jika paksi menegak dan blok telah ditetapkan sifat flex-basis dan secara serentak sifat height, maka flex-basis akan mempunyai keutamaan. Semak ini.