Ukuran Elemen Flex Sepanjang Sumbu Utama

Properti width dan height menentukan lebar dan tinggi elemen flex terlepas dari arah sumbu. Artinya, jika sumbunya horizontal, maka width akan menentukan lebar, tetapi jika sumbunya vertikal, maka width tetap akan menentukan lebar. Terkadang perilaku seperti ini tidak nyaman.

Dalam model flex terdapat properti khusus flex-basis, yang menentukan ukuran elemen sepanjang sumbu utama. Ini berarti bahwa jika sumbu utama horizontal - properti ini akan menentukan lebar elemen, dan jika vertikal - maka tinggi. Properti ini perlu ditetapkan pada elemen flex itu sendiri, bukan pada induknya. Mari kita lihat contohnya.

Misalkan sekarang sumbu utama 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;
}

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

Buatlah 5 blok-flex. Tetapkan lebar mereka sepanjang sumbu utama menjadi 100px. Perhatikan perilaku blok sepanjang sumbu yang berbeda.

Jika sumbunya horizontal dan sebuah blok diberikan properti flex-basis dan secara bersamaan properti width, maka flex-basis akan memiliki prioritas. Ujilah ini.

Jika sumbunya vertikal dan sebuah blok diberikan properti flex-basis dan secara bersamaan properti height, maka flex-basis akan memiliki prioritas. Ujilah ini.