Die flex-basis Eienskap

Die eienskap flex-basis spesifiseer die grootte van 'n spesifieke flex-blok voordat die ander flex eienskappe daarop toegepas word. In die algemeen spesifiseer die eienskap die grootte van die element langs die hoof-as. Dit beteken dat as die hoof-as horisontaal is - sal hierdie eienskap die breedte van die elemente spesifiseer, en as dit vertikaal is - dan die hoogte.

Word toegepas op 'n spesifieke flex blok.

Hierdie eienskap is 'n samestellende deel van die kortskrif-eienskap flex.

Sintaksis

selektor {
	flex-basis: enige CSS eenhede (en persentasies) | auto;
}

Verstekwaarde: auto.

Voorbeeld

Kom ons neem aan die hoof-as is horisontaal, en flex-basis het die waarde 50px. In hierdie geval sal die breedte van die elemente 50px wees:

<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; /* as is horisontaal */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px; /* grootte van element */
	border: 1px solid green;
}

Voorbeeld

Kom ons draai nou die as om, sonder om die waarde van die eienskap flex-basis te verander. In hierdie geval sal die hoogte van die elemente 50px wees:

<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; /* as is vertikaal */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Sien ook

die eienskap flex-direction,
wat die rigting van die flex blokke se asse spesifiseer
die eienskap justify-content,
wat belyning langs die hoof-as spesifiseer
die eienskap align-items,
wat belyning langs die dwars-as spesifiseer
die eienskap flex-wrap,
wat die veelreëligheid van flex blokke spesifiseer
die eienskap flex-flow,
kortskrif vir flex-direction en flex-wrap
die eienskap order,
wat die volgorde van flex blokke spesifiseer
die eienskap align-self,
wat die belyning van een blok spesifiseer
die eienskap flex-grow,
wat die 'gulheid' van flex blokke spesifiseer
die eienskap flex-shrink,
wat die inkrimpbaarheid van flex blokke spesifiseer
die eienskap flex,
kortskrif vir flex-grow, flex-shrink en flex-basis