Thuộc tính flex-direction

Thuộc tính flex-direction thiết lập hướng của trục chính và trục phụ hoặc, nói cách khác, sắp xếp các phần tử theo hàng hoặc theo cột.

Áp dụng cho phần tử cha của các khối flex. Là một phần của thuộc tính viết tắt flex-flow.

Cú pháp

bộ chọn {
	flex-direction: row | row-reverse | column | column-reverse;
}

Giá trị	Mô tả
`row`	Trục chính hướng từ trái sang phải. Các phần tử được sắp xếp thành hàng, theo mặc định dính vào cạnh trái, thứ tự đánh số của chúng có thứ tự thông thường - từ trái sang phải.
`row-reverse`	Trục chính hướng từ phải sang trái. Các phần tử được sắp xếp thành hàng, theo mặc định dính vào cạnh phải, thứ tự đánh số của chúng có thứ tự ngược lại - từ phải sang trái.
`column`	Trục chính hướng từ trên xuống dưới. Các phần tử được sắp xếp thành cột, theo mặc định dính vào phía trên, thứ tự đánh số của chúng có thứ tự thông thường - từ trên xuống dưới.
`column-reverse`	Trục chính hướng từ dưới lên trên. Các phần tử được sắp xếp thành cột, theo mặc định dính vào phía dưới, thứ tự đánh số của chúng có thứ tự ngược lại - từ dưới lên trên.

Giá trị mặc định: row.

Các phần tử được sắp xếp thành hàng, theo mặc định dính vào cạnh trái, thứ tự đánh số của chúng có thứ tự thông thường - từ trái sang phải:

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

Các phần tử được sắp xếp thành hàng, theo mặc định dính vào cạnh phải, thứ tự đánh số của chúng có thứ tự ngược lại - từ phải sang trái:

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

Các phần tử được sắp xếp thành cột, theo mặc định dính vào phía trên, thứ tự đánh số của chúng có thứ tự thông thường - từ trên xuống dưới:

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

Các phần tử được sắp xếp thành cột, theo mặc định dính vào phía dưới, thứ tự đánh số của chúng có thứ tự ngược lại - từ dưới lên trên:

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