ตัวอย่าง
สายแพ็คไปยังศูนย์กลางของภาชนะดิ้น:
div
{
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: center;
}
ลองตัวเอง» ความหมายและการใช้งาน
สถานที่ให้บริการจัดเนื้อหาปรับเปลี่ยนลักษณะการทำงานของสถานที่ให้บริการ Flex-ห่อ มันก็คล้าย ๆ ในการจัดรายการที่ แต่แทนที่จะสอดคล้องรายการดิ้นมันสอดคล้องสายดิ้น
เคล็ดลับ: ใช้ ปรับเนื้อหา สถานที่ให้บริการในการจัดรายการในหลักแกน (horizontally)
หมายเหตุ: ต้องมีหลายบรรทัดของรายการสำหรับคุณสมบัตินี้จะมีผลกระทบใด ๆ
| ค่าเริ่มต้น: | stretch |
|---|---|
| รับการถ่ายทอด: | no |
| Animatable: | no. Read about animatable |
| เวอร์ชัน: | CSS3 |
| ไวยากรณ์ javascript: | object .style.alignContent="center" Try it |
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
ตามด้วยหมายเลข -webkit- ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| align-content | 21.0 | 11.0 | 28.0 | 9.0 7.0 -webkit- | 12.1 |
CSS ไวยากรณ์
align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;ค่าทรัพย์สิน
| ความคุ้มค่า | ลักษณะ | เล่น |
|---|---|---|
| stretch | ค่ามาตรฐาน เส้นยืดจะใช้พื้นที่ที่เหลือ | เล่น " |
| center | เส้นจะถูกบรรจุไปยังศูนย์กลางของภาชนะดิ้น | เล่น " |
| flex-start | เส้นจะถูกบรรจุไปยังจุดเริ่มต้นของภาชนะดิ้น | เล่น " |
| flex-end | สายจะเต็มไปต่อท้ายของภาชนะดิ้น | เล่น " |
| space-between | สายกระจายในภาชนะดิ้น | เล่น " |
| space-around | สายกระจายในภาชนะดิ้นมีช่องว่างขนาดเพียงครึ่งหนึ่งที่ปลายทั้ง | เล่น " |
| initial | การตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น | เล่น " |
| inherit | สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก |
หน้าเว็บที่เกี่ยวข้อง
อ้างอิง CSS: align-items property
อ้างอิง CSS: align-self property
CSS อ้างอิง: justify-content property
อ้างอิง HTML DOM: alignContent property