Style alignContent แคร์ด

คำอธิบายและการใช้งาน

เมื่อองค์ประกอบไม่ใช้ช่องว่างทั้งหมดบนแนวนอก (ตั้งแต่ขวาไปที่ซ้าย)alignContent จัดตั้งองค์ประกอบของเครื่องยนต์ยีนเนอร์

คำแนะนำ：ใช้ justifyContent แคร์ด จัดตั้งองค์ประกอบบนแนวหลัก (ตั้งแต่นอกไปที่ด้านขวา)

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

ตัวอย่าง

จัดวางองค์ประกอบขององค์ประกอบ <div> แบบอิเล็กทรอนิกส์ที่มีช่องว่างที่แบ่งแถวทั้งสอง:

document.getElementById("main").style.alignContent = "space-between";

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

วลี

คืนค่าตัวแปร alignContent：

object.style.alignContent

ตั้งค่าตัวแปร alignContent：

object.style.alignContent = "stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit"

ค่าตัวแปร

ค่า คำอธิบาย
stretch ค่าเริ่มต้น。แถวขยายเพื่อเต็มช่องว่างที่เหลือ
center องค์ประกอบตั้งอยู่ที่กลางของโดเมน
flex-start องค์ประกอบตั้งอยู่ที่จุดเริ่มต้นของโดเมน
flex-end องค์ประกอบตั้งอยู่ที่ปลายของโดเมน
space-between องค์ประกอบตั้งอยู่ในช่องว่างของแถวในระหว่าง
space-around องค์ประกอบมีช่องว่างหลังของแถวตัวแรก แถวในระหว่าง และแถวหลังของแถว
initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้นของมัน。ดู initial。
inherit สืบทอดคุณสมบัตินี้จากองค์ประกอบพ่อของเขา。ดู inherit。

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

ค่าเริ่มต้น stretch
ค่าที่ได้รับ ข้อความ แสดงความหมายขององค์ประกอบ ตัวแปร align-content。
เวอร์ชัน CSS： CSS3

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

alignContent เป็นคุณสมบัติ CSS3 (1999)。

ทุกเบราเซอร์สนับสนุนอย่างเต็มที่:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน 11

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

คู่มืออ้างอิง CSS：ตัวแปร align-content

HTML DOM STYLE คู่มืออ้างอิง：ตัวแปร alignItems

HTML DOM STYLE คู่มืออ้างอิง：ตัวแปร alignSelf

HTML DOM STYLE คู่มืออ้างอิง：justifyContent แคร์ด