
1.flex-grow指擴展flex子項所佔據的寬度,擴展的空間就是除去元素外剩餘的空白間隙。
2.不支援負值,預設值是0,表示不佔用剩餘的空白間隙擴展自己的寬度。
如果flex-grow大於0,則flex容器剩餘空間的分配就會發生。
實例
// HTML部分<div>
<div></div>
<div></div>
<div></div>
</div>
// 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屬性的介紹,希望對大家有幫助。