ตัวอย่าง
ศูนย์การจัดแนวสำหรับรายการทั้งหมดของความยืดหยุ่น <div> องค์ประกอบ:
div
{
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
align-items: center;
}
ลองตัวเอง» ความหมายและการใช้งาน
สถานที่ให้บริการจัดรายการ-ระบุการจัดตำแหน่งเริ่มต้นสำหรับรายการภายในภาชนะที่มีความยืดหยุ่น
Tip: ใช้สถานที่ให้บริการจัดตัวเองของแต่ละรายการที่จะแทนที่จัดรายการ-ทรัพย์สิน
ค่าเริ่มต้น: | stretch |
---|---|
รับการถ่ายทอด: | no |
Animatable: | no. Read about animatable |
เวอร์ชัน: | CSS3 |
ไวยากรณ์ javascript: | object .style.alignItems="center" Try it |
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
ตามด้วยหมายเลข -webkit- ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
คุณสมบัติ | |||||
---|---|---|---|---|---|
align-items | 21.0 | 11.0 | 20.0 | 9.0 7.0 -webkit- | 12.1 |
CSS ไวยากรณ์
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;
ค่าทรัพย์สิน
ความคุ้มค่า | ลักษณะ | เล่น |
---|---|---|
stretch | ค่าเริ่มต้น. รายการที่จะขยายให้พอดีกับภาชนะ | เล่น " |
center | รายการที่อยู่ในตำแหน่งที่เป็นศูนย์กลางของภาชนะ | เล่น " |
flex-start | รายการที่อยู่ในตำแหน่งที่จุดเริ่มต้นของภาชนะ | เล่น " |
flex-end | รายการที่อยู่ในตำแหน่งที่ส่วนท้ายของภาชนะ | เล่น " |
baseline | รายการที่อยู่ในตำแหน่งที่ baseline ของภาชนะ | เล่น " |
initial | การตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น | เล่น " |
inherit | สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก |
หน้าเว็บที่เกี่ยวข้อง
CSS อ้างอิง: align-content property
อ้างอิง CSS: align-self property
อ้างอิง HTML DOM: alignItems property