這個一個自適應的3列盒子

 div >
 
紅色藍色綠色
 
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
flex主要帶3個屬性值
分別是flex-grow 規定項目將相對于其他靈活的項目進行擴展的量。
紅色藍色綠色
 
 div >
如上面的例子，當父容器的寬度大于子元素的寬度和的時候觸發
因為設置了flex-basis為100px
flex的寬度為400px，里面的3個dom的總長度設置為300px；那么多了100的剩余寬度。
第一個子元素的擴展量：(1/(1+2+3))*100，即約等于16px；
第二個子元素的擴展量：(2/(1+2+3))*100，即約等于32px；
第三個子元素的擴展量：(3/(1+2+3))*100，即約等于48px；
 
 
 分別是flex-shrink 規定項目將相對于其他靈活的項目進行收縮的量。
紅色藍色綠色
 
 div >
如上面的例子，當父容器的寬度小于子元素的寬度和的時候觸發
因為設置了flex-basis為200px
flex的寬度為400px，里面的3個dom的總長度設置為600px；那么少了200px的剩余寬度。
因為設定過收縮的量所以需要200*1+200*2+200*3=1200；
所以第1個子容器的寬度為200-（200*1/1200）*200=166px
所以第2個子容器的寬度為200-（200*2/1200）*200=134px
所以第3個子容器的寬度為200-（200*3/1200）*200=100px
 
 
 
當「flex-basis」在「flex」屬性中不為0時（包括值為auto，此時伸縮基準值等于自身內容寬度），「flex子項」將分配容器的剩余空間（剩余空間即等于容器寬度減去各項的伸縮基準值）
當「flex-basis」在「flex」屬性中等于0時，「flex子項」將分配容器的所有空間（因為各項的伸縮基準值相加等于0，剩余空間等于容器寬度減去各項的伸縮基準值，即減0，最后剩余空間值等于容器寬度），所以可以借助此特性，給各子項定義「flex: 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的用法和屬性的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。