Style flexDirection รายละเอียด

การรับรู้และใช้งาน

flexDirection ตั้งค่าหรือคืนค่าทิศทางของรายการที่มีความยืดหยาบ

หมายเหตุ:ถ้าองค์ประกอบไม่ใช่รายการที่มีความยืดหยาบ flexDirection คุณสมบัติไม่ถูกต้อง

ดูเพิ่มเติม

คู่มืออ้างอิง CSS:flex-direction รายละเอียด

ตัวอย่าง

เปลี่ยนแนวที่รายการที่มีความยืดหยาบภายใน <div> ใหม่:

document.getElementById("main").style.flexDirection = "column-reverse";

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

ภาษาบัญญัติ

คืนค่า flexDirection รายละเอียด:

object.style.flexDirection

ตั้งค่า flexDirection รายละเอียด:

object.style.flexDirection = "row|row-reverse|column|column-reverse|initial|inherit"

ค่ารายละเอียดขององค์ประกอบ

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

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

ค่าเริ่มต้น: row
ค่าที่กลับมา: ตัวอักษรสาย,แสดงว่าองค์ประกอบขององค์ประกอบ flex-direction รายละเอียด.
เวอร์ชั่น CSS: CSS3

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

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
สนับสนุน 11.0 สนับสนุน 9.0 สนับสนุน

หน้าเกี่ยวข้อง

คู่มืออ้างอิง HTML DOM STYLE:flex รายละเอียด

คู่มืออ้างอิง HTML DOM STYLE:flexBasis รายละเอียด

คู่มืออ้างอิง HTML DOM STYLE:flexFlow รายละเอียด

คู่มืออ้างอิง HTML DOM STYLE:flexGrow รายละเอียด

คู่มืออ้างอิง HTML DOM STYLE:flexShrink รายละเอียด

คู่มืออ้างอิง HTML DOM STYLE:flexWrap รายละเอียด