Flex elemento dydis pagrindinėje ašyje

Savybės width ir height nustato flex elemento plotį ir aukštį nepriklausomai nuo ašių krypties. Tai yra, jei ašis horizontali, tai width nustatys plotį, bet jei ašis vertikali, tai width vis tiek nustatys plotį. Kartais toks elgesys ne patogus.

Flex modelyje egzistuoja speciali savybė flex-basis, kuri nustato elemento dydį pagrindinėje ašyje. Tai reiškia, kad jei pagrindinė ašis horizontali - ši savybė bus nustatys elementų plotį, o jei vertikali - tai aukštį. Ši savybė turi būti nustatyta pačiems flex elementams, o ne jų tėviniam elementui. Pažiūrėkime pavyzdžiais.

Tarkime, pagrindinė ašis yra horizontali, o flex-basis reikšmė yra 50px. Šiuo atveju elementų plotis bus 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; /* ašis horizontali */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;   /* elemento dydis */
	border: 1px solid green;
}

Dabar apverskime ašį, nekeisdami savybės flex-basis reikšmės. Šiuo atveju jau elementų aukštis bus 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; /* ašis vertikali */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Sukurkite 5 flex-blokus. Nustatykite jų plotį pagrindinėje ašyje į 100px. Stebėkite blokų elgesį skirtingų ašių atžvilgiu.

Jei ašis horizontali ir blokui nustatyta savybė flex-basis ir kartu savybė width, tai flex-basis turės pirmenybę. Patikrinkite tai.

Jei ašis vertikali ir blokui nustatyta savybė flex-basis ir kartu savybė height, tai flex-basis turės pirmenybę. Patikrinkite tai.