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 үшін қысқарту