คุณสมบัติยืดหยุ่นสไตล์
ตัวอย่าง
ให้รายการยืดหยุ่นทั้งหมดมีความยาวเท่ากัน โดยไม่คำนึงถึงเนื้อหา:
for (i = 0; i
y[i].style.flex = "1";
}
ความหมายและการใช้งาน
คุณสมบัติ flex จะตั้งค่าหรือส่งคืนความยาวของรายการ โดยสัมพันธ์กับรายการแบบยืดหยุ่นที่เหลือภายในคอนเทนเนอร์เดียวกัน
คุณสมบัติ flex เป็นชวเลขสำหรับคุณสมบัติ flexGrow, flexShrink และ flexBasis
หมายเหตุ:หากองค์ประกอบไม่ใช่รายการที่ยืดหยุ่น คุณสมบัติ flex จะไม่มีผล
รองรับเบราว์เซอร์
| Property | |||||
|---|---|---|---|---|---|
| flex | Yes | 11.0 10.0 msFlex |
Yes | 9.0 | Yes |
ไวยากรณ์
ส่งคืนคุณสมบัติ flex:
object.style.flex
ตั้งค่าคุณสมบัติดิ้น:
object.style.flex = "flex-grow flex-shrink flex-basis|auto|initial|inherit"
มูลค่าทรัพย์สิน
| Value | Description |
|---|---|
| flex-grow | A number specifying how much the item will grow relative to the rest of the flexible items |
| flex-shrink | A number specifying how much the item will shrink relative to the rest of the flexible items |
| flex-basis | The length of the item. Legal values: "auto", "inherit", or a number followed by "%", "px", "em" or any other length unit |
| auto | Same as 1 1 auto. |
| initial | Same as 0 1 auto. Read about initial |
| none | Same as 0 0 auto. |
| inherit | Inherits this property from its parent element. Read about inherit |
รายละเอียดทางเทคนิค
| ค่าเริ่มต้น: | 0 1 อัตโนมัติ |
|---|---|
| คืนมูลค่า: | A String แทนคุณสมบัติ flex ของ element |
| เวอร์ชัน CSS | CSS3 |
หน้าที่เกี่ยวข้อง
การอ้างอิง CSS: คุณสมบัติ flex
การอ้างอิง HTML DOM STYLE: คุณสมบัติ flexBasis
การอ้างอิง HTML DOM STYLE: คุณสมบัติ flexDirection
การอ้างอิงสไตล์ HTML DOM: คุณสมบัติ flexFlow
การอ้างอิง HTML DOM STYLE: flexGrow property
การอ้างอิง HTML DOM STYLE: คุณสมบัติ flexShrink
การอ้างอิง HTML DOM STYLE: คุณสมบัติ flexWrap
❮ สไตล์วัตถุ