CSS flex-grow 屬性
示例
讓第二個 flex-item 比其他 item 寬三倍
div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}
自己動手試一試 »
定義和用法
flex-grow 屬性指定了在同一容器內的其他靈活專案相比，該專案將增長多少。
注意：如果元素不是靈活專案，flex-grow 屬性將不起作用。
| 預設值 | 0 |
|---|---|
| 繼承 | no |
| 可動畫 | 是。 閱讀關於可動畫的內容 嘗試一下 |
| 版本 | CSS3 |
| JavaScript 語法 | object.style.flexGrow="5" 嘗試一下 |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| flex-grow | 29 | 11 | 28 | 9 | 17 |
CSS 語法
flex-grow: 數字|initial|inherit;
屬性值
| 值 | 描述 | 試一試 |
|---|---|---|
| 數字 | 一個數字，指定該專案與其他靈活專案相比的增長程度。預設值為 0 | 演示 ❯ |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
相關頁面
CSS 教程：CSS 彈性盒子
CSS 參考：flex 屬性
CSS 參考：flex-basis 屬性
CSS 參考：flex-direction 屬性
CSS 參考：flex-flow 屬性
CSS 參考：flex-shrink 屬性
CSS 參考：flex-wrap 屬性
HTML DOM 參考： flexGrow 屬性
