Негизги ок боюнча флекстик элементтин өлчөмү

width жана height касиеттери октордун багытына карабастан флекстик элементтин туурасын жана бийиктигин белгилейт. Башкача айтканда, эгер ок горизонталдык болсо, анда width туурасын белгилейт, бирок эгер ок тик болсо, width дагы эле туурасын белгилей берет. Кээде мындай иш-аракет ыңгайсыз болот.

Флекстик модельде элементтин негизги ок боюнча өлчөмүн белгилөөчү атайын flex-basis касиети бар. Бул дегенди билдирет, эгер негизги ок горизонталдык болсо - бул касиет элементтердин туурасын белгилейт, ал эми тик болсо - анда бийиктигин. Бул касиет ата-энесине эмес, flex элементтеринин өзүнө белгилениши керек. Келгиле, мисалдарды карап көрөлү.

Азыр негизги ок горизонталдык деп коёлу, ал эми flex-basis касиети 50px маанисине ээ болсун. Бул учурда элементтердин туурасы 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; /* ок горизонталдык */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;   /* элементтин өлчөмү */
	border: 1px solid green;
}

Эми окторду оодарып салалы, flex-basis касиетинин маанисин өзгөртпөй туруп. Бул учурда элементтердин бийиктиги 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; /* ок тик */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

5 флекстик блолкторду жасаңыз. Аларга негизги ок боюнча туурасын 100px кылып белгилеңиз. Блоктордун ар кандай октор боюнча иш-аракетин көрүңүз.

Эгер ок горизонталдык болсо жана блокко flex-basis касиети жана ошол эле учурда width касиети белгиленсе, анда flex-basis артыкчылыкка ээ болот. Муну текшериңиз.

Эгер ок тик болсо жана блокко flex-basis касиети жана ошол эле учурда height касиети белгиленсе, анда flex-basis артыкчылыкка ээ болот. Муну текшериңиз.