Vetia flex-direction

Vetia flex-direction përcakton drejtimin e boshtit kryesor dhe tërthor ose, me fjalë të tjera, rendit elementet në rresht ose në kolonë.

Aplikohet në elementin prind për blloqet flex. Bën pjesë në vetinë e shkurtuar flex-flow.

Sintaksa

përzgjedhës {
	flex-direction: row | row-reverse | column | column-reverse;
}

Vlerat

Vlera	Përshkrimi
`row`	Boshti kryesor është i drejtuar nga e majta në të djathtë. Elementet janë të renditura në rresht, nga parazgjedhja të ngjitura në anën e majtë, numërimi i tyre ka rendin e zakonshëm - nga e majta në të djathtë.
`row-reverse`	Boshti kryesor është i drejtuar nga e djathta në të majtë. Elementet janë të renditura në rresht, nga parazgjedhja të ngjitura në anën e djathtë, numërimi i tyre ka rend të kundërt - nga e djathta në të majtë.
`column`	Boshti kryesor është i drejtuar nga lart poshtë. Elementet janë të renditura në kolonë, nga parazgjedhja të ngjitura në krye, numërimi i tyre ka rendin e zakonshëm - nga lart poshtë.
`column-reverse`	Boshti kryesor është i drejtuar nga poshtë lart. Elementet janë të renditura në kolonë, nga parazgjedhja të ngjitura në fund, numërimi i tyre ka rend të kundërt - nga poshtë lart.

Vlera e parazgjedhur: row.

Shembull

Elementet janë të renditura në rresht, nga parazgjedhja të ngjitura në anën e majtë, numërimi i tyre ka rendin e zakonshëm - nga e majta në të djathtë:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: row;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

Shembull . Vlera row-reverse

Elementet janë të renditura në rresht, nga parazgjedhja të ngjitura në anën e djathtë, numërimi i tyre ka rend të kundërt - nga e djathta në të majtë:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: row-reverse;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

Shembull . Vlera column

Elementet janë të renditura në kolonë, nga parazgjedhja të ngjitura në krye, numërimi i tyre ka rendin e zakonshëm - nga lart poshtë:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: column;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

Shembull . Vlera column-reverse

Elementet janë të renditura në kolonë, nga parazgjedhja të ngjitura në fund, numërimi i tyre ka rend të kundërt - nga poshtë lart:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: column-reverse;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

Shihni gjithashtu

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