Хусусияти flex-direction

Хусусияти flex-direction самти меҳвари асосӣ ва амудиро муқаррар мекунад ё, бо дигар вожаҳо гуфта, унсурҳоро дар саф ё дар сутун ҷой медиҳад.

Ба унсури волидайн барои блокҳои flex татбиқ мешавад. Дар хусусияти кӯтоҳшуда flex-flow дохил аст.

Синтаксис

интихобкунанда {
	flex-direction: row | row-reverse | column | column-reverse;
}

Қимат	Тавсиф
`row`	Меҳвари асосӣ аз чап ба рост самт гирифтааст. Унсурҳо дар саф ҷойгиранд, ба таври пешфарз ба канори чап фишор ёфтаанд, рақамгузории онҳо тартиби оддиро дорад - аз чап ба рост.
`row-reverse`	Меҳвари асосӣ аз рост ба чап самт гирифтааст. Унсурҳо дар саф ҷойгиранд, ба таври пешфарз ба канори рост фишор ёфтаанд, рақамгузории онҳо тартиби баръаксро дорад - аз рост ба чап.
`column`	Меҳвари асосӣ аз боло ба поён самт гирифтааст. Унсурҳо дар сутун ҷойгиранд, ба таври пешфарз ба боло фишор ёфтаанд, рақамгузории онҳо тартиби оддиро дорад - аз боло ба поён.
`column-reverse`	Меҳвари асосӣ аз поён ба боло самт гирифтааст. Унсурҳо дар сутун ҷойгиранд, ба таври пешфарз ба поён фишор ёфтаанд, рақамгузории онҳо тартиби баръаксро дорад - аз поён ба боло.

Қимати пешфарз: row.

Унсурҳо дар саф ҷойгиранд, ба таври пешфарз ба канори чап фишор ёфтаанд, рақамгузории онҳо тартиби оддиро дорад - аз чап ба рост:

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

Унсурҳо дар саф ҷойгиранд, ба таври пешфарз ба канори рост фишор ёфтаанд, рақамгузории онҳо тартиби баръаксро дорад - аз рост ба чап:

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

Унсурҳо дар сутун ҷойгиранд, ба таври пешфарз ба боло фишор ёфтаанд, рақамгузории онҳо тартиби оддиро дорад - аз боло ба поён:

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

Унсурҳо дар сутун ҷойгиранд, ба таври пешфарз ба поён фишор ёфтаанд, рақамгузории онҳо тартиби баръаксро дорад - аз поён ба боло:

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

хусусияти justify-content,
ки барои меҳвари асосӣ мувофиқсозиро муқаррар мекунад
хусусияти align-items,
ки барои меҳвари амудӣ мувофиқсозиро муқаррар мекунад
хусусияти flex-wrap,
ки серсатрӣ (multi-line) будани блокҳои flex-ро муқаррар мекунад
хусусияти flex-flow,
кӯтоҳшуда барои flex-direction ва flex-wrap
хусусияти order,
ки тартиби блокҳои flex-ро муқаррар мекунад
хусусияти align-self,
ки мувофиқсозии як блокро муқаррар мекунад
хусусияти flex-basis,
ки андозаи блоки мушаххаси flex-ро муқаррар мекунад
хусусияти flex-grow,
ки ҳавасмандии блокҳои flex-ро муқаррар мекунад
хусусияти flex-shrink,
ки фишорпазирии блокҳои flex-ро муқаррар мекунад
хусусияти flex,
кӯтоҳшуда барои flex-grow, flex-shrink ва flex-basis