flex-direction Özelliği

flex-direction özelliği, ana ve çapraz eksenin yönünü belirler veya başka bir deyişle, öğeleri bir satır veya sütun halinde düzenler.

Flex kutuları için ebeveyn öğeye uygulanır. flex-flow kısaltma özelliğinin bir parçasıdır.

Sözdizimi

seçici {
	flex-direction: row | row-reverse | column | column-reverse;
}

Değer	Açıklama
`row`	Ana eksen soldan sağa doğru yönlendirilir. Öğeler bir satır halinde dizilir, varsayılan olarak sol kenara yaslanır, sıralamaları normal sıradadır - soldan sağa.
`row-reverse`	Ana eksen sağdan sola doğru yönlendirilir. Öğeler bir satır halinde dizilir, varsayılan olarak sağ kenara yaslanır, sıralamaları ters sıradadır - sağdan sola.
`column`	Ana eksen yukarıdan aşağıya doğru yönlendirilir. Öğeler bir sütun halinde dizilir, varsayılan olarak üst kenara yaslanır, sıralamaları normal sıradadır - yukarıdan aşağıya.
`column-reverse`	Ana eksen aşağıdan yukarıya doğru yönlendirilir. Öğeler bir sütun halinde dizilir, varsayılan olarak alt kenara yaslanır, sıralamaları ters sıradadır - aşağıdan yukarıya.

Varsayılan değer: row.

Öğeler bir satır halinde dizilir, varsayılan olarak sol kenara yaslanır, sıralamaları normal sıradadır - soldan sağa:

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

Öğeler bir satır halinde dizilir, varsayılan olarak sağ kenara yaslanır, sıralamaları ters sıradadır - sağdan sola:

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

Öğeler bir sütun halinde dizilir, varsayılan olarak üst kenara yaslanır, sıralamaları normal sıradadır - yukarıdan aşağıya:

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

Öğeler bir sütun halinde dizilir, varsayılan olarak alt kenara yaslanır, sıralamaları ters sıradadır - aşağıdan yukarıya:

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