介绍flex的用法和属性

这个一个自适应的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教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。