Флекс элементінің басты ось бойынша өлшемі

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 басым болады. Мұны тексеріңіз.