CSS ระบบ flex-direction

การระบุและวิธีใช้

ใช้กำหนดแนวที่องค์ประกอบแบบยืดเยื้อจะมุ่งหน้า

หมายเหตุ：ถ้าองค์ประกอบไม่ใช่โปรเจกต์แบบยืดเยื้อ ในกำหนดค่า flex จะไม่มีผล

ดูเพิ่มเติม:

CSS คู่มือCSS ฟล็กซิเบิลบอกซ์

คู่มือ CSSflex คุณสมบัติ

คู่มือ CSSflex-basis คุณสมบัติ

คู่มือ CSSflex-flow คุณสมบัติ

คู่มือ CSSflex-grow คุณสมบัติ

คู่มือ CSSflex-shrink คุณสมบัติ

คู่มือ CSSflex-wrap คุณสมบัติ

คู่มือ HTML DOMflexDirection คุณสมบัติ

ตัวอย่าง

ตั้งค่าทิศทางขององค์ประกอบยืดเยื้อภายในตัวองค์ประกอบ <div> ในทิศทางที่ตรงกันข้าม:

div {
  display: flex;
  flex-direction: row-reverse; 
}

ทดลองด้วยตัวเอง

ระยะเวลา CSS

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

ค่าทางตัวเลือก

ค่า คำอธิบาย
row ค่าเริ่มต้น. แสดงรายการที่มีความยาวเท้าขององค์ประกอบยืดเยื้อตามแนวนอน
row-reverse แถวที่เหมือนกัน แต่มีทิศทางตรงกันข้าม
column แสดงรายการที่มีความยาวเท้าขององค์ประกอบยืดเยื้อตามแนวตั้ง
column-reverse คอลัมน์ที่เหมือนกัน แต่มีทิศทางตรงกันข้าม
initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น. ดูถึง initial.
inherit สืบทอดคุณสมบัตินี้จากตัวปลายทางของเรื่อง. ดูถึง inherit.

รายละเอียดเทคนิค

ค่าเริ่มต้น: row
การสืบทอด: ไม่
การสร้างอนุการ์: ไม่สนับสนุน。ดูถึง:คุณสมบัติที่เกี่ยวข้องกับอนุการ์.
เวอร์ชัน: CSS3
ระยะเวลา JavaScript: object.style.flexDirection="column-reverse"

ตัวอย่างเพิ่มเติม

ใช้ flex-direction และคำสั่ง media query ร่วมกันเพื่อสร้างโครงสร้างที่ต่างกันสำหรับขนาดหน้าจอ/อุปกรณ์ที่ต่างกัน

.flex-container {
  display: flex;
  flex-direction: row;
}
/* การจัดระเบียบตอบสนอง - สร้างโครงสร้างเดียวคอลัมน์ (100%) แทนโครงสร้างสองคอลัมน์ (50%) */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

ทดลองด้วยตัวเอง

การสนับสนุนโดยบราวเซอร์

ตัวเลขในตารางบอกว่าเวอร์ชันบราวเซอร์แรกที่สนับสนุนคุณสมบัตินี้

ตัวเลขที่มี -webkit- หรือ -moz- แสดงว่าใช้เบอร์พรีฟิกซ์ในสัปดาห์แรก

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0