Својството 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;
}

Пример . Вредност row-reverse

Елементите се расположени во ред, по стандард притиснати кон десниот раб, нивното нумерирање има обратен редослед - од десно кон лево:

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

Пример . Вредност column

Елементите се расположени во колона, по стандард притиснати кон врвот, нивното нумерирање има обичен редослед - од горе надолу:

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

Пример . Вредност column-reverse

Елементите се расположени во колона, по стандард притиснати кон дното, нивното нумерирање има обратен редослед - од долу нагоре:

<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,
кое ја задава повеќелинискоста на 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