คุณสมบัติ flex-direction

คุณสมบัติ flex-direction กำหนด ทิศทางของแกนหลักและแกนตัดขวาง หรือ พูดอีกนัยหนึ่งคือ จัดเรียงองค์ประกอบ เป็นแถวหรือคอลัมน์

นำไปใช้กับองค์ประกอบหลัก (parent) สำหรับ flex blocks เป็นส่วนหนึ่งของคุณสมบัติแบบย่อ flex-flow

ไวยากรณ์

selector {
	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 blocks
คุณสมบัติ flex-flow,
คำสั่งย่อสำหรับ flex-direction และ flex-wrap
คุณสมบัติ order,
ซึ่งกำหนดลำดับของ flex blocks
คุณสมบัติ align-self,
ซึ่งกำหนดการจัดตำแหน่งของบล็อกเดียว
คุณสมบัติ flex-basis,
ซึ่งกำหนดขนาดของ flex block เฉพาะ
คุณสมบัติ flex-grow,
ซึ่งกำหนดความ "โลภ" ของ flex blocks
คุณสมบัติ flex-shrink,
ซึ่งกำหนดความสามารถในการย่อตัวของ flex blocks
คุณสมบัติ flex,
คำสั่งย่อสำหรับ flex-grow, flex-shrink และ flex-basis