คุณสมบัติ Style flexFlow

การกำหนดและการใช้งาน

flexFlow คุณสมบัตินี้เป็น flexDirection และ flexWrap คุณสมบัติย่อย

flexDirection คุณสมบัตินี้กำหนดทิศทางขององค์ประกอบของอลตรา

flexWrap คุณสมบัตินี้กำหนดว่าองค์ประกอบของอลตราควรเปลี่ยนแปลงบรรทัดหรือไม่

หมายเหตุ:ถ้าองค์ประกอบไม่ใช่องค์ประกอบของอลตรา flexFlow คุณสมบัติไม่ถูกต้อง

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

คู่มืออ้างอิง CSS:flex-flow 属性

ตัวอย่าง

แสดงรายการที่มีขนาดความยาวเท่ากันตามคอลัมน์และไม่เปลี่ยนแปลงบรรทัด:

document.getElementById("main").style.flexFlow = "column nowrap";

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

รูปแบบ

คืนค่า flexFlow ระบุ:

object.style.flexFlow

ตั้งค่า flexFlow ระบุ:

object.style.flexFlow = "flex-direction flex-wrap|initial|inherit"

ค่าของคุณสมบัติ

ค่า รายละเอียด
flex-direction

ค่าที่เป็นไปได้:

  • row
  • row-reverse
  • column
  • column-reverse
  • initial
  • inherit

ค่าเริ่มต้นคือ "row"

กำหนดทิศทางขององค์ประกอบของอลตรา
flex-wrap

ค่าที่เป็นไปได้:

  • nowrap
  • wrap
  • wrap-reverse
  • initial
  • inherit

ค่าเริ่มต้นคือ "nowrap"

กำหนดว่าองค์ประกอบของอลตราควรเปลี่ยนแปลงบรรทัดหรือไม่
initial ตั้งคุณสมบัตินี้เป็นค่าเริ่มต้น โปรดดู initial。
inherit ขอบคุณที่ยืนยันคุณสมบัตินี้จากตัวปลายทางของคุณ โปรดดู inherit。

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

ค่าเริ่มต้น: row nowrap
ค่าที่กลับมา: ตัวแปลข้อความที่แสดงว่า flex-flow 属性。
เวอร์ชั่น 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 คู่มืออ้างอิง：flexDirection 属性

HTML DOM STYLE คู่มืออ้างอิง：flexGrow 属性

HTML DOM STYLE คู่มืออ้างอิง：flexShrink 属性

HTML DOM STYLE คู่มืออ้างอิง：flexWrap 属性