Flex-egenskapen

Egenskapen flex er en forkortelse for flex-basis, flex-shrink og flex-grow.

Gjelder for: en spesifikk flex-boks.

Rekkefølgen på verdiene spiller ingen rolle. Den andre og tredje parameteren (flex-shrink, flex-basis) er ikke obligatoriske.

Verdier

Se de tilsvarende egenskapene.

Standardverdi: 0 1 auto.

Eksempel

La oss si at vi har 3 elementer. Bredden på hver av dem er 200px og totalt 600px, noe som er større enn bredden på foreldrekontaineren, som er 300px. La oss sette bredden for det første elementet til 200px, for det andre elementet - 300px, for det tredje elementet - 100px. For alle elementene la verdien flex-basis være 1, og flex-shrink - 1, 2, 3 i henhold til elementets rekkefølgenummer:

<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 også

egenskapen flex-direction,
som setter retningen på aksene til flex-bokser
egenskapen justify-content,
som setter justering langs hovedaksen
egenskapen align-items,
som setter justering langs kryssaksen
egenskapen flex-wrap,
som setter flerlinthet for flex-bokser
egenskapen flex-flow,
forkortelse for flex-direction og flex-wrap
egenskapen order,
som setter rekkefølgen til flex-bokser
egenskapen align-self,
som setter justering av en enkelt boks
egenskapen flex-basis,
som setter størrelsen på en spesifikk flex-boks
egenskapen flex-grow,
som setter "grådigheten" til flex-bokser
egenskapen flex-shrink,
som setter krympbarheten til flex-bokser