Ֆլեքս տարրի չափը գլխավոր առանցքի երկայնքով

width և height հատկությունները սահմանում են ֆլեքս տարրի լայնությունը և բարձրությունը՝ անկախ առանցքների ուղղությունից: Այսինքն, եթե առանցքը հորիզոնական է, ապա width կսահմանի լայնությունը, բայց եթե առանցքը ուղղահայաց է, ապա width կշարունակի սահմանել լայնությունը: Երբեմն այդպիսի վարքագիծը հարմար չէ:

Ֆլեքս մոդելում գոյություն ունի հատուկ հատկություն flex-basis, որը սահմանում է տարրի չափը գլխավոր առանցքի երկայնքով: Սա նշանակում է, որ եթե գլխավոր առանցքը հորիզոնական է, այս հատկությունը կսահմանի տարրերի լայնությունը, իսկ եթե ուղղահայաց է, ապա բարձրությունը: Այս հատկությունը պետք է սահմանել ինքնին ֆլեքս տարրերին, այլ ոչ թե դրանց ծնողին: Եկեք նայենք օրինակներով:

Ենթադրենք, հիմա գլխավոր առանցքը հորիզոնական է, իսկ 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-ն կունենա առաջնահերթություն: Ստուգեք սա: