De flex eigenschap

De eigenschap flex is een afkorting voor flex-basis, flex-shrink en flex-grow.

Is van toepassing op: een specifiek flex item.

De volgorde van de waarden maakt niet uit. De tweede en derde parameters (flex-shrink, flex-basis) zijn optioneel.

Waarden

Zie de corresponderende eigenschappen.

Standaardwaarde: 0 1 auto.

Voorbeeld

Stel we hebben 3 elementen. De breedte van elk van hen bedraagt 200px en in totaal gelijk aan 600px, wat meer is dan de breedte van de bovenliggende container, die gelijk is aan 300px. Laten we voor het eerste element een breedte instellen van 200px, voor het tweede element - 300px, voor het derde element - 100px. Voor alle elementen laten we de waarde flex-basis gelijk zijn aan 1, en flex-shrink - 1, 2, 3 overeenkomstig het volgnummer van het element:

<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;
}

Zie ook

eigenschap flex-direction,
die de richting van de assen van flex items bepaalt
eigenschap justify-content,
die de uitlijning langs de hoofdas bepaalt
eigenschap align-items,
die de uitlijning langs de kruisas bepaalt
eigenschap flex-wrap,
die de meerdere regels van flex items bepaalt
eigenschap flex-flow,
afkorting voor flex-direction en flex-wrap
eigenschap order,
die de volgorde van flex items bepaalt
eigenschap align-self,
die de uitlijning van één item bepaalt
eigenschap flex-basis,
die de grootte van een specifiek flex item bepaalt
eigenschap flex-grow,
die de "gulzigheid" van flex items bepaalt
eigenschap flex-shrink,
die de krimpbaarheid van flex items bepaalt