Свойство flex-direction

Свойство flex-direction бош ва кўндаланг ўқнинг йўналишини белгилаб беради ёки bошқача айтганда, элементларни қатор ёки устунда жойлаштиради.

Flex блоклар учун ота-она элементга қўлланилади. flex-flow қисқартирилган свойствага киради.

Синтаксис

селектор {
	flex-direction: row | row-reverse | column | column-reverse;
}

Қиймат	Тавсиф
`row`	Бош ўқ чапдан ўнгга йўналган. Элементлар қаторда жойлашади, андоза бўйича чап четга босилиб, уларнинг нумралаши оддий тартибда - чапдан ўнгга.
`row-reverse`	Бош ўқ ўнгдан чапга йўналган. Элементлар қаторда жойлашади, андоза бўйича ўнг четга босилиб, уларнинг нумралаши тескари тартибда - ўнгдан чапга.
`column`	Бош ўқ юқоридан pastга йўналган. Элементлар устунда жойлашади, андоза бўйича юқорига босилиб, уларнинг нумралаши оддий тартибда - юқоридан pastга.
`column-reverse`	Бош ўқ pastдан юқорига йўналган. Элементлар устунда жойлашади, андоза бўйича pastга босилиб, уларнинг нумралаши тескари тартибда - pastдан юқорига.

Андозага кўра қиймат: 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;
}

Элементлар устунда жойлашади, андоза бўйича юқорига босилиб, уларнинг нумралаши оддий тартибда - юқоридан pastга:

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

Элементлар устунда жойлашади, андоза бўйича pastга босилиб, уларнинг нумралаши тескари тартибда - pastдан юқорига:

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