Flex-omadus

Omadus flex on lühend omadustele flex-basis, flex-shrink ja flex-grow.

Kehtib: konkreetsele flex-elemendile.

Väärtuste järjekord ei ole oluline. Teine ja kolmas parameeter (flex-shrink, flex-basis) ei ole kohustuslikud.

Väärtused

Vaata vastavaid omadusi.

Vaikeväärtus: 0 1 auto.

Näide

Oletame, et meil on 3 elementi. Igaühe laius on 200px ja kokku moodustavad nad 600px, mis on suurem vanemakonteineri laiusest, mis on 300px. Määrame esimese elemendi laiuseks 200px, teise elemendi - 300px, kolmanda elemendi - 100px. Kõigil elementidel olgu väärtus flex-basis võrdne 1, ja flex-shrink - 1, 2, 3 vastavalt elemendi järjekorranumbrile:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem2">3</div>
</div>

.parent {
	display: flex;
	width: 350px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 200px;
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	flex: 200px 1 1;
}
.elem2 {
	flex: 300px 1 2;
}
.elem3 {
	flex: 100px 1 3;
}

Vaata ka

omadus flex-direction,
mis määrab flex-elementide telgede suuna
omadus justify-content,
mis määrab joondamise põhitelje suhtes
omadus align-items,
mis määrab joondamise risttelje suhtes
omadus flex-wrap,
mis määrab flex-elementide mitmerealise paigutuse
omadus flex-flow,
lühend flex-direction ja flex-wrap jaoks
omadus order,
mis määrab flex-elementide järjekorra
omadus align-self,
mis määrab üksiku elemendi joondamise
omadus flex-basis,
mis määrab konkreetse flex-elemendi suuruse
omadus flex-grow,
mis määrab flex-elementide "ahneuse"
omadus flex-shrink,
mis määrab flex-elementide kokkutõmbumise