Flex-basis հատկությունը

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

Կիրառվում է կոնկրետ flex բլոկի նկատմամբ:

Այս հատկությունը կազմում է flex հապավում հատկության բաղկացուցիչ մասը:

Շարահյուսություն

ընտրիչ {
	flex-basis: ցանկացած CSS միավոր (և տոկոսներ) | auto;
}

Լռելյայն արժեքը՝ auto:

Օրինակ

Ենթադրենք, հիմնական առանցքը մեզ մոտ հորիզոնական է, իսկ 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;
}

Տես նաև

flex-direction հատկությունը,
որը սահմանում է flex բլոկների առանցքների ուղղությունը
justify-content հատկությունը,
որը սահմանում է հիմնական առանցքի երկայնքով հավասարեցումը
align-items հատկությունը,
որը սահմանում է լայնական առանցքի երկայնքով հավասարեցումը
flex-wrap հատկությունը,
որը flex բլոկների բազմատողությունը
flex-flow հատկությունը,
հապավում flex-direction-ի և flex-wrap-ի համար
order հատկությունը,
որը սահմանում է flex բլոկների հերթականությունը
align-self հատկությունը,
որը սահմանում է մեկ բլոկի հավասարեցումը
flex-grow հատկությունը,
որը սահմանում է flex բլոկների ագահությունը
flex-shrink հատկությունը,
որը սահմանում է flex բլոկների սեղմելիությունը
flex հատկությունը,
հապավում flex-grow-ի, flex-shrink-ի և flex-basis-ի համար