Flex egenskaben

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

Anvendes på: en specifik flex container.

Rækkefølgen af værdier er ikke vigtig. Den anden og tredje parameter (flex-shrink, flex-basis) er ikke obligatoriske.

Værdier

Se de tilsvarende egenskaber.

Standardværdi: 0 1 auto.

Eksempel

Lad os sige, at vi har 3 elementer. Bredden af hver af dem er 200px og samlet lig med 600px, hvilket er mere end bredden af forældrecontaineren, som er 300px. Lad os tildele det første element en bredde på 200px, det andet element - 300px, og det tredje element - 100px. For alle elementer lad værdien af flex-basis være 1, og flex-shrink - 1, 2, 3 i henhold til elementets rækkenummer:

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

egenskaben flex-direction,
som angiver retningen af flex containere
egenskaben justify-content,
som angiver justering langs hovedaksen
egenskaben align-items,
som angiver justering langs den tværgående akse
egenskaben flex-wrap,
som angiver multi-line opførsel for flex containere
egenskaben flex-flow,
forkortelse for flex-direction og flex-wrap
egenskaben order,
som angiver rækkefølgen af flex containere
egenskaben align-self,
som angiver justering af en enkelt container
egenskaben flex-basis,
som angiver størrelsen af en specifik flex container
egenskaben flex-grow,
som angiver "grådigheden" af flex containere
egenskaben flex-shrink,
som angiver komprimerbarheden af flex containere