Ana Eksen Boyunca Esnek Öğenin Boyutu

width ve height özellikleri, eksenlerin yönünden bağımsız olarak esnek öğenin genişliğini ve yüksekliğini belirler. Yani, eksen yataysa, width genişliği belirleyecek, ancak eksen dikeyse, width yine de genişliği belirleyecektir. Bazen bu davranış uygun değildir.

Esnek modelde, öğenin ana eksen boyunca boyutunu belirleyen özel bir flex-basis özelliği vardır. Bu, ana eksen yataysa - bu özellik öğelerin genişliğini belirleyeceği, dikeyse - yüksekliği belirleyeceği anlamına gelir. Bu özellik, ebeveynlerine değil, esnek öğelerin kendilerine verilmelidir. Hadi örneklerle görelim.

Şimdi ana eksenin yatay olduğunu ve flex-basis değerinin 50px olduğunu varsayalım. Bu durumda öğelerin genişliği 50px olacaktır:

<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; /* eksen yatay */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;   /* öğenin boyutu */
	border: 1px solid green;
}

Şimdi flex-basis özelliğinin değerini değiştirmeden ekseni çevirelim. Bu durumda artık öğelerin yüksekliği 50px olacaktır:

<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; /* eksen dikey */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

5 esnek blok yapın. Onlara ana eksen boyunca 100px genişlik verin. Blokların farklı eksenler boyunca davranışını gözlemleyin.

Eğer eksen yataysa ve bir bloğa hem flex-basis özelliği hem de aynı anda width özelliği verilirse, flex-basis önceliğe sahip olacaktır. Bunu test edin.

Eğer eksen dikeyse ve bir bloğa hem flex-basis özelliği hem de aynı anda height özelliği verilirse, flex-basis önceliğe sahip olacaktır. Bunu test edin.