Veturia flex-basis

Veturia flex-basis përcakton madhësinë e një blloku specifik flex para aplikimit të vetive të tjera flex tek ai. Në përgjithësi, veturia përcakton madhësinë e elementit përgjatë boshtit kryesor. Kjo do të thotë se nëse boshti kryesor është horizontal - kjo veturi do të përcaktojë gjerësinë e elementeve, ndërsa nëse është vertikal - atëherë lartësinë.

Aplikohet në një bllok specifik flex.

Kjo veturi është pjesë përbërëse e vetisë së shkurtuar flex.

Sintaksa

përzgjedhësi {
	flex-basis: çdo njësi CSS (dhe përqindje) | auto;
}

Vlera e paracaktuar: auto.

Shembull

Le të themi se boshti kryesor është i vendosur horizontalisht, dhe flex-basis ka vlerën 50px. Në këtë rast gjerësia e elementeve do të jetë 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; /* boshti horizontal */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px; /* madhësia e elementit */
	border: 1px solid green;
}

Shembull

Tani le ta kthejmë boshtin, pa ndryshuar vlerën e vetisë flex-basis. Në këtë rast tashmë lartësia e elementeve do të jetë 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; /* boshti vertikal */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Shihni gjithashtu

veturia flex-direction,
e cila përcakton drejtimin e boshteve të bllokëve flex
veturia justify-content,
e cila përcakton radhitjen përgjatë boshtit kryesor
veturia align-items,
e cila përcakton radhitjen përgjatë boshtit tërthor
veturia flex-wrap,
e cila përcakton shumë-rreshtshmërinë e bllokëve flex
veturia flex-flow,
shkurtim për flex-direction dhe flex-wrap
veturia order,
e cila përcakton rendin e bllokëve flex
veturia align-self,
e cila përcakton radhitjen e një blloku të vetëm
veturia flex-grow,
e cila përcakton lakminë e bllokëve flex
veturia flex-shrink,
e cila përcakton tkurrshmërinë e bllokëve flex
veturia flex,
shkurtim për flex-grow, flex-shrink dhe flex-basis