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

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

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

ไวยากรณ์

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

ค่า

ค่าเริ่มต้น: row

ตัวอย่าง

องค์ประกอบจัดเรียงเป็นแถว โดยค่าเริ่มต้น อยู่ชิดขอบซ้าย การเรียงลำดับมี ลำดับปกติ - จากซ้ายไปขวา:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  flex-direction: row;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

ตัวอย่าง . ค่า row-reverse

องค์ประกอบจัดเรียงเป็นแถว โดยค่าเริ่มต้น อยู่ชิดขอบขวา การเรียงลำดับมี ลำดับย้อนกลับ - จากขวาไปซ้าย:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  flex-direction: row-reverse;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

ตัวอย่าง . ค่า column

องค์ประกอบจัดเรียงเป็นคอลัมน์ โดยค่าเริ่มต้น อยู่ชิดด้านบน การเรียงลำดับมี ลำดับปกติ - จากบนลงล่าง:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  flex-direction: column;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

ตัวอย่าง . ค่า column-reverse

องค์ประกอบจัดเรียงเป็นคอลัมน์ โดยค่าเริ่มต้น อยู่ชิดด้านล่าง การเรียงลำดับมี ลำดับย้อนกลับ - จากล่างขึ้นบน:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  flex-direction: column-reverse;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

ดูเพิ่มเติม