Omadus flex-basis

Omadus flex-basis määrab konkreetse flex-bloki suuruse enne teiste flex-omaduste rakendamist sellele. Üldiselt määrab omadus elemendi suuruse piki peatelge. See tähendab, et kui peatelg on horisontaalne - määrab see omadus elementide laiuse, aga kui vertikaalne - siis kõrguse.

Rakendub konkreetsele flex-blokile.

See omadus on koostisosa lühendatud omadusest flex.

Süntaks

selektor {
	flex-basis: mis tahes CSS ühikud (ja protsendid) | auto;
}

Vaikeväärtus: auto.

Näide

Oletame, et peatelg on horisontaalne, ja flex-basis omab väärtust 50px. Sellisel juhul on elementide laius 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; /* telg horisontaalne */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px; /* elemendi suurus */
	border: 1px solid green;
}

Näide

Pöörame nüüd telje ümber, muutmata omaduse flex-basis väärtust. Sel juhul on elementide kõrgus 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; /* telg vertikaalne */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Vaata ka

omadus flex-direction,
mis määrab flex-blokkide telgede suuna
omadus justify-content,
mis määrab joondamise piki peatelge
omadus align-items,
mis määrab joondamise piki risttelge
omadus flex-wrap,
mis määrab flex-blokkide mitmerealise paigutuse
omadus flex-flow,
lühend flex-direction ja flex-wrap jaoks
omadus order,
mis määrab flex-blokkide järjekorra
omadus align-self,
mis määrab ühe bloki joondamise
omadus flex-grow,
mis määrab flex-blokkide "ahneuse"
omadus flex-shrink,
mis määrab flex-blokkide kokkutõmbumise
omadus flex,
lühend flex-grow, flex-shrink ja flex-basis jaoks