Esasy ok boýunça Fleks elementiniň ölçegi

width we height aýratynlyklary fleks elementiniň ini we beýikligini oklaryň ugrundan garaşsyz kesgitleýär. Ýagny, eger ok gorizontal bolsa, onda width ini kesgitleýär, ýöne eger ok vertikal bolsa, width henizem ini kesgitleýär. Bäzen şeýle ýagdaý amala aýlaw däl.

Fleks modelinde esasy ok boýunça elementleriň ölçegini kesgitleýän flex-basis diýen aýratyn aýratynlyk bar. Bu şuny aňladýar, eger esasy ok gorizontal bolsa - bu aýratynlyk elementleriň ini kesgitleýär, eger vertikal bolsa - beýikligini. Bu aýratynlyk öz-özüni fleks elementlerine, olaryň ata-enesine däl, kesgitlenmeli. Geliň mysallar görüň.

Indi esasy ok gorizontal bolsun we flex-basis aýratynlygynda 50px baha bolsun. Bu ýagdaýda elementleriň ini 50px bolar:

<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; /* ok gorizontal */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;   /* element ölçegi */
	border: 1px solid green;
}

Indi flex-basis aýratynlygyň bahasyny üýtgetmän, ok ýönüni üýtgedeliň. Bu ýagdaýda elementleriň beýikligi 50px bolar:

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

5 fleks-blok dörediň. Olara esasy ok boýunça ini 100px kesgitläň. Bloklaryň dürli oklar boýunça ýagdaýyna serediň.

Eger ok gorizontal bolsa we bloka flex-basis aýratynlygy bilen bir wagtda width aýratynlygy berlen bolsa, onda flex-basis üstünlikli bolar. Muny barlaň.

Eger ok vertikal bolsa we bloka flex-basis aýratynlygy bilen bir wagtda height aýratynlygy berlen bolsa, onda flex-basis üstünlikli bolar. Muny barlaň.