這篇文章主要為大家展示了“css中flex-grow屬性怎么用”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“css中flex-grow屬性怎么用”這篇文章吧。

創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)公司，提供做網(wǎng)站、成都網(wǎng)站建設(shè)，網(wǎng)頁(yè)設(shè)計(jì)，建網(wǎng)站，PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);可快速的進(jìn)行網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展；專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站，是專業(yè)的做網(wǎng)站團(tuán)隊(duì)，希望更多企業(yè)前來(lái)合作!

1、flex-grow指擴(kuò)展flex子項(xiàng)所占據(jù)的寬度，擴(kuò)展的空間就是除去元素外剩余的空白間隙。

2、不支持負(fù)值，默認(rèn)值是0，表示不占用剩余的空白間隙擴(kuò)展自己的寬度。

如果flex-grow大于0，則flex容器剩余空間的分配就會(huì)發(fā)生。

實(shí)例

// HTML部分





// CSS部分
.box{
width: 600px;
height: 200px;
border: 1px solid;
display: flex;
}
.box div:nth-of-type(1){
width: 100px;
height: 100px;
background-color: red;
}
.box div:nth-of-type(2){
width: 150px;
height: 100px;
background-color: skyblue;
}
.box div:nth-of-type(3){
width: 200px;
height: 100px;
background-color: yellow;
}

以上是“css中flex-grow屬性怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！