ตัวอย่าง
ทำให้พื้นที่บางส่วนระหว่างรายการของความยืดหยุ่น <div> องค์ประกอบ:
document.getElementById("main".style.justifyContent = "space-between"; ลองตัวเอง» ความหมายและการใช้งาน
สถานที่ให้บริการ justifyContent สอดคล้องรายการภาชนะที่มีความยืดหยุ่นเมื่อรายการที่ไม่ได้ใช้พื้นที่ที่มีอยู่ทั้งหมดในหลักแกน (horizontally)
เคล็ดลับ: ใช้ alignContent คุณสมบัติในการจัดรายการบนแกนข้าม (vertically)
สนับสนุนเบราว์เซอร์
สถานที่ให้บริการปรับเนื้อหาได้รับการสนับสนุนใน Firefox, Opera และ Chrome
วากยสัมพันธ์
กลับ justifyContent ทรัพย์สิน:
object .style.justifyContent ตั้ง justifyContent ทรัพย์สิน:
object .style.justifyContent="flex-start|flex-end|center|space-between|space-around|initial|inherit"
ค่าทรัพย์สิน
| ความคุ้มค่า | ลักษณะ |
|---|---|
| flex-start | ค่ามาตรฐาน รายการที่อยู่ในตำแหน่งที่จุดเริ่มต้นของภาชนะ |
| flex-end | รายการที่อยู่ในตำแหน่งที่ส่วนท้ายของภาชนะ |
| center | รายการที่อยู่ในตำแหน่งที่เป็นศูนย์กลางของภาชนะ |
| space-between | รายการที่อยู่ในตำแหน่งที่มีช่องว่างระหว่างบรรทัด |
| space-around | รายการที่อยู่ในตำแหน่งที่มีพื้นที่ก่อนระหว่างและหลังจากเส้น |
| initial | ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น |
| inherit | สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก |
รายละเอียดทางเทคนิค
| ราคาเริ่มต้น: | เฟล็กซ์เริ่มต้น |
|---|---|
| กลับค่า: | เชือกแทนปรับเนื้อหาทรัพย์สินขององค์ประกอบ |
| CSS รุ่น | CSS3 |
หน้าเว็บที่เกี่ยวข้อง
อ้างอิง CSS: justify-content property
HTML DOM สไตล์อ้างอิง: alignContent property
HTML DOM อ้างอิงสไตล์: alignItems property
HTML DOM สไตล์อ้างอิง: alignSelf property
<สไตล์วัตถุ