关于flex的三属性(1)flex-grow-创新互联

flex-grow

这篇先讲flex取值的问题,后面的文章在深入讲解弹性布局的应用。
1.flex是由 flex-grow,flex-shrink,flex-basis组成。看下图
关于flex的三属性(1)flex-grow
其中flex-grow:代表父容器在主轴上还有多少剩余空间。
关于剩余空间的理解:父容器(弹性盒子)在主轴方向上还有多少可利用空间。
关于flex的三属性(1)flex-grow
外层div弹性布局,剩余空间=box.width - item01.width - item02.width - item03.width
flex-grow默认值为0,且为非负数。

网站设计、成都网站制作的关注点不是能为您做些什么网站,而是怎么做网站,有没有做好网站,给成都创新互联公司一个展示的机会来证明自己,这并不会花费您太多时间,或许会给您带来新的灵感和惊喜。面向用户友好,注重用户体验,一切以用户为中心。

eg01:
关于flex的三属性(1)flex-grow
结果:
关于flex的三属性(1)flex-grow
将 class="item02"的div,样式设置flex:2,效果:
关于flex的三属性(1)flex-grow
只有class="item02"的div设置了flex:2样式,意思是剩余空间分成2份,全部给item02.flex默认值0表示不要剩余空间。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网页标题:关于flex的三属性(1)flex-grow-创新互联
文章位置:http://pwwzsj.com/article/isocd.html