CSS ความหลากหลายflex-grow
- หน้าก่อน flex-flow
- หน้าต่อไป flex-shrink
การกำหนดและการใช้งาน
คุณสมบัติ flex-grow กำหนดปริมาณการเติบโตของโครงสร้างเมื่ออยู่ในช่องที่เดียวกันกับโครงสร้างอื่น ๆ ในองค์กร
หมายเหตุ:คุณสมบัติ flex ไม่มีประโยชน์ถ้าเอลิเมนต์ไม่ใช่โครงสร้างเฟล็กซิบิลิตี้
ดูเพิ่มเติม:
สอน CSS เฟล็กซิบิลิตี้บอกซ์ CSS
คู่มือ CSSคุณสมบัติ flex
คู่มือ CSSคุณสมบัติ flex-basis
คู่มือ CSSคุณสมบัติ flex-direction
คู่มือ CSSคุณสมบัติ flex-flow
คู่มือ CSSคุณสมบัติ flex-shrink
คู่มือ CSSคุณสมบัติ flex-wrap
คู่มือ HTML DOMคุณสมบัติ flexGrow
ตัวอย่าง
ทำให้ความกว้างของโครงสร้างที่สองเป็นสามเท่ากับโครงสร้างอื่น ๆ ในองค์กร
div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}
ระบบเรียกใช้ CSS
flex-grow: number|initial|inherit;
ค่าคุณสมบัติ
| ค่า | รายละเอียด |
|---|---|
| number | ค่าเลขฐาน กำหนดการเติบโตของโครงสร้างนี้เป็นร้อยละเพียงของโครงสร้างอื่น ๆ ในองค์กร. ปริยายค่าเป็น 0 |
| initial | ตั้งคุณสมบัตินี้เป็นค่าปริยาย. ดู: initial. |
| inherit | นำคุณสมบัตินี้มาจากตัวปลอมของเอลิเมนต์พ่อ. ดู: inherit. |
รายละเอียดเทคโนโลยี
| ค่าปริยาย: | 0 |
|---|---|
| เปิดแสดงทางเลือก: | ไม่ |
| การสร้างอนุการ์: | สนับสนุน. ดูบทความที่:คุณสมบัติที่เกี่ยวข้องกับอนุการ์. |
| รุ่น: | CSS3 |
| ระบบเรียกใช้ JavaScript: | object.style.flexGrow="5" |
การสนับสนุนของเบราเซอร์
ตัวเลขในตารางบ่งชี้รุ่นแรกที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่
ตัวเลขในตารางบ่งชี้รุ่นที่ใช้เครื่องเลือกแบบระบบนอกเหนือจากการใช้หน้าแก้ไขตัวอย่าง
| 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 |
- หน้าก่อน flex-flow
- หน้าต่อไป flex-shrink
