Egenskapen flex

Egenskapen flex är en förkortning för flex-basis, flex-shrink och flex-grow.

Tillämpas på: en specifik flexbox.

Ordningen på värdena spelar ingen roll. Den andra och tredje parametern (flex-shrink, flex-basis) är inte obligatoriska.

Värden

Se motsvarande egenskaper.

Standardvärde: 0 1 auto.

Exempel

Låt oss säga att vi har 3 element. Bredden på var och en av dem är 200px och totalt 600px, vilket är mer än bredden på föräldrakontainern, som är 300px. Låt oss tilldela det första elementet en bredd på 200px, det andra elementet - 300px, och det tredje elementet - 100px. För alla element låt värdet flex-basis vara 1, och flex-shrink - 1, 2, 3 i enlighet med elementets ordningsnummer:

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

Se även

egenskapen flex-direction,
som anger riktningen på flexboxens axlar
egenskapen justify-content,
som anger justering längs huvudaxeln
egenskapen align-items,
som anger justering längs tväraxeln
egenskapen flex-wrap,
som anger flerradighet för flexboxar
egenskapen flex-flow,
förkortning för flex-direction och flex-wrap
egenskapen order,
som anger ordningen på flexboxar
egenskapen align-self,
som anger justering av en enskild box
egenskapen flex-basis,
som anger storleken på en specifik flexbox
egenskapen flex-grow,
som anger "glupskheten" hos flexboxar
egenskapen flex-shrink,
som anger komprimerbarheten hos flexboxar