Egenskapen flex-basis

Egenskapen flex-basis setter størrelsen på en spesifikk flex-blokk før de andre flex-egenskapene brukes på den. Generelt sett angir egenskapen elementets størrelse langs hovedaksen. Dette betyr at hvis hovedaksen er horisontal - vil denne egenskapen angi elementenes bredde, og hvis den er vertikal - vil den angi høyden.

Gjelder for en spesifikk flex-blokk.

Denne egenskapen er en del av sammensatte egenskapen flex.

Syntaks

selector {
	flex-basis: alle CSS-enheter (og prosenter) | auto;
}

Standardverdi: auto.

Eksempel

La oss si at hovedaksen vår er horisontal, og flex-basis har verdien 50px. I dette tilfellet vil bredden på elementene 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 horisontal */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px; /* elementets størrelse */
	border: 1px solid green;
}

Eksempel

La oss nå snu aksen, uten å endre verdien på egenskapen flex-basis. I dette tilfellet vil høyden på elementene 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 vertikal */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Se også

egenskapen flex-direction,
som angir retningen på flex-blokkers akser
egenskapen justify-content,
som angir justering langs hovedaksen
egenskapen align-items,
som angir justering langs kryssaksen
egenskapen flex-wrap,
som angir flerlinjethet for flex-blokker
egenskapen flex-flow,
sammendrag for flex-direction og flex-wrap
egenskapen order,
som angir rekkefølgen på flex-blokker
egenskapen align-self,
som angir justering av en enkelt blokk
egenskapen flex-grow,
som angir grådigheten til flex-blokker
egenskapen flex-shrink,
som angir krympbarheten til flex-blokker
egenskapen flex,
sammendrag for flex-grow, flex-shrink og flex-basis