css中的flex-grow屬性怎么用
這篇文章將為大家詳細講解有關css中的flex-grow屬性怎么用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)建站是專業(yè)的寬城網(wǎng)站建設公司，寬城接單;提供做網(wǎng)站、成都網(wǎng)站制作,網(wǎng)頁設計,網(wǎng)站設計,建網(wǎng)站,PHP網(wǎng)站建設等專業(yè)做網(wǎng)站服務;采用PHP框架,可快速的進行寬城網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!
定義和用法
flex-grow屬性用于設置或檢索彈性盒子的擴展比率。
注意：如果元素不是彈性盒對象的元素，則flex-grow屬性不起作用。
默認值：0
繼承：否
可動畫化：是。
版本：CSS3
JavaScript語法：
object.style.flexGrow="5"
CSS語法：
flex-grow:number|initial|inherit;
屬性值
number一個數(shù)字，規(guī)定項目將相對于其他靈活的項目進行擴展的量。默認值是0。
initial設置該屬性為它的默認值。
inherit從父元素繼承該屬性。
實例
讓第二個元素的寬度為其他元素的三倍：
<!DOCTYPEhtml>
<html>
<head>
<style>
#main{
width:350px;
height:100px;
border:1pxsolid#c3c3c3;
display:flex;
}
#maindiv:nth-of-type(1){flex-grow:1;}
#maindiv:nth-of-type(2){flex-grow:3;}
#maindiv:nth-of-type(3){flex-grow:1;}
#maindiv:nth-of-type(4){flex-grow:1;}
#maindiv:nth-of-type(5){flex-grow:1;}
</style>
</head>
<body>
<divid="main">
<divstyle="background-color:coral;"></div>
<divstyle="background-color:lightblue;"></div>
<divstyle="background-color:khaki;"></div>
<divstyle="background-color:pink;"></div>
<divstyle="background-color:lightgrey;"></div>
</div>
<p><b>注意:</b>InternetExplorer10及更早版本瀏覽器不支持flex-grow屬性。</p>
<p><b>注意:</b>Safari6.1及更新版本通過-webkit-flex-grow屬性支持該屬性。</p>
</body>
</html>
關于“css中的flex-grow屬性怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
當前文章：css中的flex-grow屬性怎么用
標題鏈接：http://m.newbst.com/article44/gcisee.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供面包屑導航、響應式網(wǎng)站、品牌網(wǎng)站建設、動態(tài)網(wǎng)站、營銷型網(wǎng)站建設、做網(wǎng)站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)
