Flex elementin esas ox boyu olcusu

width ve height xususiyyetleri flex elementin enini ve hundurluyunu oxlarin istiqametinden asili olmayaraq teyin edir. Yeni, eger ox ufqidirse, width eni teyin edecek, amma ox şaqulidirse, width yenə də eni teyin edecek. Bezen bu davranış rahatsizliq yaradır.

Flex modelinde flex-basis adli xususi bir xususiyyet var, hansi ki, elementin esas ox boyu olcusunu teyin edir. Bu o demekdir ki, eger esas ox ufqidirse - bu xususiyyet elementlerin enini teyin edecek, şaquli olarsa - hundurluyunu. Bu xususiyyet flex elementlerin ozune teyin edilmelidir, valideynine deyil. Gelin numunelerle yaxindan baxaq.

Fərz edek ki, esas ox ufqidir, ve flex-basis 50px qiymetine malikdir. Bu halda elementlerin eni 50px olacaq:

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

Gelin indi oxu cevirek, flex-basis xususiyyetinin qiymetini deyişmeden. Bu halda artiq elementlerin hundurluyu 50px olacaq:

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

5 flex-blok hazırlayın. Onlara esas ox boyu enini 100px teyin edin. Bloklarin muxtelif oxlar boyu davranişina baxın.

Eger ox ufqidirse ve bloka hem flex-basis xususiyyeti, hem de width xususiyyeti teyin olunubsa, flex-basis ustunluk teşkil edecek. Bunu yoxlayın.

Eger ox şaqulidirse ve bloka hem flex-basis xususiyyeti, hem de height xususiyyeti teyin olunubsa, flex-basis ustunluk teşkil edecek. Bunu yoxlayın.