Die grootte van 'n fleks-element langs die hoofas

Die eienskappe width en height stel die breedte en hoogte van die fleks-element onafhanklik van die asrigtings. Dit wil sê, as die as horisontaal is, dan sal width die breedte stel, maar as die as vertikaal is, sal width steeds die breedte stel. Soms is so 'n gedrag nie gerieflik nie.

In die fleksmodel is daar 'n spesiale eienskap flex-basis, wat die grootte van die element langs die hoofas stel. Dit beteken dat as die hoofas horisontaal is - hierdie eienskap sal die breedte van die elemente stel, en as dit vertikaal is - dan die hoogte. Hierdie eienskap moet gestel word aan die fleks-elemente self, nie aan hul ouer nie. Kom ons kyk na voorbeelde.

Laat ons aanneem die hoofas is tans 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;
}

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;
}

Maak 5 fleks-blokke. Stel hulle breedte langs die hoofas na 100px. Kyk na die gedrag van die blokke langs verskillende asse.

As die as horisontaal is en die blok het beide die eienskap flex-basis en terselfdertyd die eienskap width gestel, dan sal flex-basis prioriteit hê. Toets dit.

As die as vertikaal is en die blok het beide die eienskap flex-basis en terselfdertyd die eienskap height gestel, dan sal flex-basis prioriteit hê. Toets dit.