Style flexDirection รายละเอียด
- หน้าก่อน flexBasis
- หน้าต่อไป flexFlow
- กลับไปยังชั้นเดียวกัน Object HTML DOM Style
การรับรู้และใช้งาน
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 รายละเอียด
- หน้าก่อน flexBasis
- หน้าต่อไป flexFlow
- กลับไปยังชั้นเดียวกัน Object HTML DOM Style