The flex-direction property

The flex-direction property sets a direction of the main and cross axis or, in other words, arranges elements in a row or column.

It applies to the parent element for flex blocks. It is included in the shorthand flex-flow property.

Syntax

selector {
	flex-direction: row | row-reverse | column | column-reverse;
}

Value	Description
`row`	The main axis is directed from left to right. Elements are arranged in a row, by default pressed to the left edge, their numbering is in the usual order - from left to right.
`row-reverse`	The main axis is directed from right to left. Elements are arranged in a row, by default pressed to the right edge, their numbering is in reverse order - from right to left.
`column`	The main axis is directed from top to bottom. The elements are arranged in a column, pressed to the top by default, their numbering is in the usual order - top to bottom.
`column-reverse`	The main axis is directed from bottom to top. The elements are arranged in a column, pressed to the bottom by default, their numbering is in reverse order - bottom to top.

Default value: row.

Elements are arranged in a row, by default pressed to the left edge, their numbering is in the usual order - from left to right:

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

Elements are arranged in a row, by default pressed to the right edge, their numbering is in reverse order - from right to left:

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

The elements are arranged in a column, pressed to the top by default, their numbering is in the usual order - top to bottom:

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

The elements are arranged in a column, pressed to the bottom by default, their numbering is in reverse order - bottom to top:

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