Fleksa elementa izmērs gar galveno asi

Īpašības width un height nosaka fleksa elementa platumu un augstumu neatkarīgi no asu virziena. Tas ir, ja ass ir horizontāla, tad width noteiks platumu, bet ja ass ir vertikāla, tad width joprojām noteiks platumu. Dažreiz šāda uzvedība nav ērta.

Fleksa modelī pastāv īpaša īpašība flex-basis, kas nosaka elementa izmēru gar galveno asi. Tas nozīmē, ka ja galvenā ass ir horizontāla - šī īpašība noteiks elementu platumu, bet ja vertikāla - tad augstumu. Šī īpašība jānorāda pašiem fleksa elementiem, nevis to vecākam. Apskatīsim ar piemēriem.

Pieņemsim, ka galvenā ass ir horizontāla, un flex-basis ir vērtība 50px. Šajā gadījumā elementu platums būs 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; /* ass horizontāla */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;   /* elementa izmērs */
	border: 1px solid green;
}

Tagad apgriezīsim asi, nemainot īpašības flex-basis vērtību. Šajā gadījumā jau elementu augstums būs 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; /* ass vertikāla */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Izveidojiet 5 fleksa blokus. Norādiet tiem platumu gar galveno asi 100px. Vērojiet bloku uzvedību gar dažādām asīm.

Ja ass ir horizontāla un blokam ir norādīta īpašība flex-basis un vienlaicīgi īpašība width, tad flex-basis būs priekšrocība. Pārbaudiet to.

Ja ass ir vertikāla un blokam ir norādīta īpašība flex-basis un vienlaicīgi īpašība height, tad flex-basis būs priekšrocība. Pārbaudiet to.