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屬性的介紹,希望對大家有幫助。