Sifa flex-direction

Sifa flex-direction inaweka mwelekeo wa mhimili mkuu na mhimili wa pili au, kwa kusema kwa maneno mengine, huweka vipengele kwa safu mlalo au safu wima.

Inatumika kwa kipengele kizazi cha vikundi vya flex. Imojumuishwa katika sifa iliyofupishwa flex-flow.

Kiendeshaji

kichaguzi {
	flex-direction: row | row-reverse | column | column-reverse;
}

Thamani

Thamani	Maelezo
`row`	Mhimili mkuu unaelekezwa kutoka kushoto kwenda kulia. Vipengele vimewekwa kwa safu mlalo, kwa urekebisho wa msingi vimegandamizwa kwenye upande wa kushoto, nambari zao zina mpangilio wa kawaida - kutoka kushoto kwenda kulia.
`row-reverse`	Mhimili mkuu unaelekezwa kutoka kulia kwenda kushoto. Vipengele vimewekwa kwa safu mlalo, kwa urekebisho wa msingi vimegandamizwa kwenye upande wa kulia, nambari zao zina mpangilio wa kinyume - kutoka kulia kwenda kushoto.
`column`	Mhimili mkuu unaelekezwa kutoka juu kwenda chini. Vipengele vimewekwa kwa safu wima, kwa urekebisho wa msingi vimegandamizwa kwenye sehemu ya juu, nambari zao zina mpangilio wa kawaida - kutoka juu kwenda chini.
`column-reverse`	Mhimili mkuu unaelekezwa kutoka chini kwenda juu. Vipengele vimewekwa kwa safu wima, kwa urekebisho wa msingi vimegandamizwa kwenye sehemu ya chini, nambari zao zina mpangilio wa kinyume - kutoka chini kwenda juu.

Thamani ya msingi: row.

Mfano

Vipengele vimewekwa kwa safu mlalo, kwa urekebisho wa msingi vimegandamizwa kwenye upande wa kushoto, nambari zao zina mpangilio wa kawaida - kutoka kushoto kwenda kulia:

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

Mfano . Thamani row-reverse

Vipengele vimewekwa kwa safu mlalo, kwa urekebisho wa msingi vimegandamizwa kwenye upande wa kulia, nambari zao zina mpangilio wa kinyume - kutoka kulia kwenda kushoto:

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

Mfano . Thamani column

Vipengele vimewekwa kwa safu wima, kwa urekebisho wa msingi vimegandamizwa kwenye sehemu ya juu, nambari zao zina mpangilio wa kawaida - kutoka juu kwenda chini:

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

Mfano . Thamani column-reverse

Vipengele vimewekwa kwa safu wima, kwa urekebisho wa msingi vimegandamizwa kwenye sehemu ya chini, nambari zao zina mpangilio wa kinyume - kutoka chini kwenda juu:

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

Angalia pia

sifa justify-content,
ambayo inaweka mpangilio kwenye mhimili mkuu
sifa align-items,
ambayo inaweka mpangilio kwenye mhimili wa pili
sifa flex-wrap,
ambayo inaweka uwezo wa kuvunja mistari mbalimbali kwa vikundi vya flex
sifa flex-flow,
ufupisho wa flex-direction na flex-wrap
sifa order,
ambayo inaweka mpangilio wa vikundi vya flex
sifa align-self,
ambayo inaweka mpangilio wa kipengele kimoja
sifa flex-basis,
ambayo inaweka ukubwa wa kipengele maalum cha flex
sifa flex-grow,
ambayo inaweka ukubwa wa kukua kwa vikundi vya flex
sifa flex-shrink,
ambayo inaweka uwezo wa kukunjwa kwa vikundi vya flex
sifa flex,
ufupisho wa flex-grow, flex-shrink na flex-basis