Veturia flex

Veturia flex është një shkurtim për flex-basis, flex-shrink dhe flex-grow.

Zbatohet për: një bllok specifik flex.

Rendi i vlerave nuk ka rëndësi. Parametri i dytë dhe i tretë (flex-shrink, flex-basis) nuk janë të detyrueshëm.

Vlerat

Shiko veturitë përkatëse.

Vlera e paracaktuar: 0 1 auto.

Shembull

Le të kemi 3 elementë. Gjerësia e secilit prej tyre është 200px dhe së bashku janë të barabartë me 600px, që është më shumë se gjerësia e kontejnerit prind, e cila është e barabartë me 300px. Le t'i caktojmë elementit të parë gjerësinë 200px, elementit të dytë - 300px, për elementin e tretë - 100px. Për të gjithë elementët le të jetë vlera flex-basis e barabartë me 1, dhe flex-shrink - 1, 2, 3 në përputhje me numrin rendor të elementit:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem2">3</div>
</div>

.parent {
	display: flex;
	width: 350px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 200px;
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	flex: 200px 1 1;
}
.elem2 {
	flex: 300px 1 2;
}
.elem3 {
	flex: 100px 1 3;
}

Shihni gjithashtu

veturia flex-direction,
e cila përcakton drejtimin e akseve të blloqeve flex
veturia justify-content,
e cila përcakton rreshtimin përgjatë boshtit kryesor
veturia align-items,
e cila përcakton rreshtimin përgjatë boshtit tërthor
veturia flex-wrap,
e cila përcakton shumë-rreshtshmërinë e blloqeve flex
veturia flex-flow,
shkurtim për flex-direction dhe flex-wrap
veturia order,
e cila përcakton rendin e blloqeve flex
veturia align-self,
e cila përcakton rreshtimin e një blloku të vetëm
veturia flex-basis,
e cila përcakton madhësinë e një blloku specifik flex
veturia flex-grow,
e cila përcakton lakminë e blloqeve flex
veturia flex-shrink,
e cila përcakton ngjeshshmërinë e blloqeve flex