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