這個(gè)一個(gè)自適應(yīng)的3列盒子

 div >
 
紅色藍(lán)色綠色
 
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
flex主要帶3個(gè)屬性值
分別是flex-grow 規(guī)定項(xiàng)目將相對(duì)于其他靈活的項(xiàng)目進(jìn)行擴(kuò)展的量。
紅色藍(lán)色綠色
 
 div >
如上面的例子，當(dāng)父容器的寬度大于子元素的寬度和的時(shí)候觸發(fā)
因?yàn)樵O(shè)置了flex-basis為100px
flex的寬度為400px，里面的3個(gè)dom的總長度設(shè)置為300px；那么多了100的剩余寬度。
第一個(gè)子元素的擴(kuò)展量：(1/(1+2+3))*100，即約等于16px；
第二個(gè)子元素的擴(kuò)展量：(2/(1+2+3))*100，即約等于32px；
第三個(gè)子元素的擴(kuò)展量：(3/(1+2+3))*100，即約等于48px；
 
 
 分別是flex-shrink 規(guī)定項(xiàng)目將相對(duì)于其他靈活的項(xiàng)目進(jìn)行收縮的量。
紅色藍(lán)色綠色
 
 div >
如上面的例子，當(dāng)父容器的寬度小于子元素的寬度和的時(shí)候觸發(fā)
因?yàn)樵O(shè)置了flex-basis為200px
flex的寬度為400px，里面的3個(gè)dom的總長度設(shè)置為600px；那么少了200px的剩余寬度。
因?yàn)樵O(shè)定過收縮的量所以需要200*1+200*2+200*3=1200；
所以第1個(gè)子容器的寬度為200-（200*1/1200）*200=166px
所以第2個(gè)子容器的寬度為200-（200*2/1200）*200=134px
所以第3個(gè)子容器的寬度為200-（200*3/1200）*200=100px
 
 
 
當(dāng)「flex-basis」在「flex」屬性中不為0時(shí)（包括值為auto，此時(shí)伸縮基準(zhǔn)值等于自身內(nèi)容寬度），「flex子項(xiàng)」將分配容器的剩余空間（剩余空間即等于容器寬度減去各項(xiàng)的伸縮基準(zhǔn)值）
當(dāng)「flex-basis」在「flex」屬性中等于0時(shí)，「flex子項(xiàng)」將分配容器的所有空間（因?yàn)楦黜?xiàng)的伸縮基準(zhǔn)值相加等于0，剩余空間等于容器寬度減去各項(xiàng)的伸縮基準(zhǔn)值，即減0，最后剩余空間值等于容器寬度），所以可以借助此特性，給各子項(xiàng)定義「flex: n」來進(jìn)行按比例均分容器總寬度
 
 
淺綠 = 支持
紅色 = 不支持
粉色 = 部分支持
ValuesIEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid ChromeBasic Support6.0-10.02.0-21.04.0-20.06.015.0+-webkit-6.0-6.12.1-4.318.0-19.011.0+22.0+21.0+-webkit-6.1+-webkit-17.0+7.0+-webkit-4.4+20.0+-webkit-29.0+9.0+9.0+28.0+
 
以上就是介紹flex的用法和屬性的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。