Flex-basis īpašība

Īpašība flex-basis nosaka konkrēta flex bloka izmēru pirms tam tiek piemērotas pārējās flex īpašības. Kopumā, īpašība nosaka elementa izmēru gar galveno asi. Tas nozīmē, ka, ja galvenā ass ir horizontāla - šī īpašība noteiks elementu platumu, bet, ja tā ir vertikāla - tad augstumu.

Attiecas uz konkrētu flex bloku.

Šī īpašība ir sastāvdaļa saīsinātajā īpašībā flex.

Sintakse

selektors {
	flex-basis: jebkuras CSS vienības (un procenti) | auto;
}

Noklusējuma vērtība: auto.

Piemērs

Pieņemsim, ka galvenā ass ir novietota horizontāli, un flex-basis ir vērtība 50px. Šajā gadījumā elementu platums būs 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; /* ass horizontāla */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px; /* elementa izmērs */
	border: 1px solid green;
}

Piemērs

Tagad apgriezīsim asi, nemainot īpašības flex-basis vērtību. Šajā gadījumā elementu augstums būs 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; /* ass vertikāla */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Skatiet arī

īpašība flex-direction,
kas nosaka flex bloku asu virzienu
īpašība justify-content,
kas nosaka izlīdzināšanu gar galveno asi
īpašība align-items,
kas nosaka izlīdzināšanu gar šķērsasi
īpašība flex-wrap,
kas nosaka flex bloku daudzrindu iedalījumu
īpašība flex-flow,
saīsinājums priekš flex-direction un flex-wrap
īpašība order,
kas nosaka flex bloku secību
īpašība align-self,
kas nosaka viena bloka izlīdzināšanu
īpašība flex-grow,
kas nosaka flex bloku "alkatību"
īpašība flex-shrink,
kas nosaka flex bloku saspiežamību
īpašība flex,
saīsinājums priekš flex-grow, flex-shrink un flex-basis