CSS รายการflex-shrink
การกำหนดและการใช้งาน
คุณสมบัติ flex-shrink ถูกกำหนดในที่เดียวกันกับตัวแทน โดยย่อยชิ้นส่วนเริ่มต้นต่อเมื่อเทียบกับชิ้นส่วนอื่น ๆ ของเริ่มต้น
หมายเหตุ:คุณสมบัติ flex ไม่มีประโยชน์หากองค์ประกอบไม่ใช่ชิ้นส่วนยืดตัว
ดูเพิ่มเติม:
ตำรา CSS CSS กล่องยืดตัว
คู่มือ CSSคุณสมบัติ flex
คู่มือ CSSคุณสมบัติ flex-basis
คู่มือ CSSคุณสมบัติ flex-direction
คู่มือ CSSคุณสมบัติ flex-flow
คู่มือ CSSคุณสมบัติ flex-grow
คู่มือ CSSคุณสมบัติ flex-wrap
คู่มือ HTML DOMคุณสมบัติ flexShrink
ตัวอย่าง
ทำให้ชิ้นส่วนที่สองย่อยตัวเทียบกับชิ้นส่วนอื่น ๆ สามเท่า:
div:nth-of-type(2) {
flex-shrink: 3;
}
CSS ศัพท์
flex-shrink: number|initial|inherit;
ค่าของคุณสมบัติ
| ค่า | คำอธิบาย |
|---|---|
| number | ตัวเลข กำหนดปริมาณที่ย่อยของชิ้นส่วนเริ่มต้นต่อเมื่อเทียบกับชิ้นส่วนอื่น ๆ ของเริ่มต้น. ค่าเริ่มต้นคือ 1 |
| initial | ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น. ดู: initial. |
| inherit | ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น. ดู: inherit. |
รายละเอียดเทคโนโลยี
| ค่าเริ่มต้น: | 1 |
|---|---|
| ทิ้ง | ไม่ |
| การสร้างอนุการ์: | สนับสนุน. ดู:คุณสมบัติที่เกี่ยวกับอนุการ์. |
| เวอร์ชัน: | CSS3 |
| JavaScript วากย์แบบ: | object.style.flexShrink="5" |
การสนับสนุนเบราเซอร์
ตัวเลขในตารางบอกว่าเป็นเวอร์ชันเบราเซอร์แรกที่สนับสนุนคุณสมบัตินี้ทั้งหมด
ตัวเลขที่มี -webkit- หรือ -moz- แสดงว่าเป็นสัญลักษณ์ของสัญญาณแรกที่ใช้
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 29.0 21.0 -webkit- |
11.0 | 28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
