Egenskaben flex-basis

Egenskaben flex-basis angiver størrelsen på en specifik flex-blok før de øvrige flex-egenskaber anvendes på den. Generelt set angiver egenskaben elementets størrelse langs hovedaksen. Det betyder, at hvis hovedaksen er vandret - vil denne egenskab angive elementernes bredde, og hvis den er lodret - vil den angive højden.

Anvendes på en specifik flex-blok.

Denne egenskab er en del af sammentrukket egenskab flex.

Syntaks

selektor {
	flex-basis: enhver CSS-enhed (og procenter) | auto;
}

Standardværdi: auto.

Eksempel

Lad os antage, at hovedaksen er vandret, og flex-basis har værdien 50px. I dette tilfælde vil elementernes bredde være 50px:

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

.parent	{
	display: flex;
	flex-direction: row; /* aksen er vandret */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px; /* elementets størrelse */
	border: 1px solid green;
}

Eksempel

Lad os nu vende aksen uden at ændre værdien af egenskaben flex-basis. I dette tilfælde vil elementernes højde være 50px:

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

.parent {
	display: flex;
	flex-direction: column; /* aksen er lodret */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Se også

egenskaben flex-direction,
som angiver retningen på flex-blokkes akser
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 fleksible blokkes multilinethed
egenskaben flex-flow,
forkortelse for flex-direction og flex-wrap
egenskaben order,
som angiver rækkefølgen af fleksible blokke
egenskaben align-self,
som angiver justering af en enkelt blok
egenskaben flex-grow,
som angiver fleksible blokkes grådighed
egenskaben flex-shrink,
som angiver fleksible blokkes sammenpresselighed
egenskaben flex,
forkortelse for flex-grow, flex-shrink og flex-basis