环境
近期的一个要求里做了一个合理布局,依照循环系统列表展示的每一条合理布局大约是这样子。

但我发觉,每每wrap起效,其实就是内部右边会出现折行时,右边会总体往偏移,进而压缩了左边的宽度。 预期效果如下图,原定的125px给碾成了80.95px。

而且,折行越大,往左边偏位的程度越多。如下图,折行4行情况下,给压到46px。

不折行时,才算是自己想要的正常的实际效果,能够看见就是我界定的125px。

为什么啊!!!那总不可以规定后台管理发送给我的数据不能过于多啊!!!
随后,我就去探讨了flex,在大人帮助下,在css文档中放了一句话。

随后,,,好啦!!!看!!!

随后,高手告诉我,“好宝宝!看一看flex代表什么意思吧”,于是我就乖乖地来到。
flex:1
flex单值简称:flex-grow
,flex-shrink
和flex-basis
。flex:1
相当于flex:1 1 0%
。
原素规格能够弹力扩大,还可以弹力缩小,具备十足的弹力,flex:1
在规格不够的时候会优先选择降到最低具体内容规格。
搜集资料见到
flex-grow : 1; ➜ The div will grow in same proportion as the window-size
flex-shrink : 1; ➜ The div will shrink in same proportion as the window-size
flex-basis : 0; ➜ The div does not have a starting value as such and will
take up screen as per the screen size available for
e.g:- if 3 divs are in the wrapper then each div will take 33%.
适宜应用flex:1的画面
当期待原素灵活运用可用空间,与此同时不容易侵吞别的原素应该有的长度的情况下,适宜应用flex:1
,这样的画面在Flex布局中是非常多的。
比如每一个均分目录,或是等占比目录都很适合应用flex:1
或者其它flex标值,适合的合理布局实际效果轮廊如图所示。

及其适用没有规律性布局中动态内容原素。举例说明如下所示。如果我们需要按键可以正常表明,能够给左边原素设定flex:1
,也可以给按键原素设为flex:none
。针对按键原素来讲,里边的文字部分一定是不可以自动换行的,这时,就特别适合设定flex:none
。

其它的flex单值
别的比较常见的flex简称有以下这好多个,flex:0
、flex:none
、flex:auto
。

flex:0
flex:0
相当于设定flex: 0 1 0%
。 表明flex-grow
是0,flex-shrink
是1,因而原素规格会收拢但不会拓展,再加上flex-basis:0%
表明提议适用是0,因而,设定flex:0
元素最后的规格体现为最少具体内容总宽。
flex:none
flex:none
相当于设定flex: 0 0 auto
。表明原素规格不容易收拢都不会拓展,加上flex-basis:auto
表明固定不动规格由具体内容确定,因为原素不具备弹力,因而,原素里的具体内容不容易自动换行,最后规格一般体现为较大具体内容总宽。
当flex子项的宽度便是具体内容的宽度,且具体内容从来不会自动换行,则适宜应用flex:none
,这样的场景比flex:0
适用情景要更加普遍。
flex:auto
flex:auto
相当于设定flex: 1 1 auto
。
当期待原素灵活运用可用空间,可是分别尺寸依照分别信息进行分配情况下,适宜应用flex:auto
。
flex:auto
一般用于具体内容固定不动,或是具体内容可控的合理布局情景,比如导航栏总数不规律,每一个导航栏文字数量都不固定导航栏实际效果就适合应用flex:auto
实际效果来达到。
综合来说,
flex:initial
表明默认flex情况,不需要特意设定,适合小控制元素遍布合理布局,或是某一项具体内容变化规律的规划;flex:0
使用场景偏少,适宜设在更换元素父元素上;flex:none
适用不换行内容固定不动或是较小的小控制原素上,如按键。flex:1
适宜均分合理布局;flex:auto
适宜根据具体内容动态性兼容的规划。
参照文章内容:
flex:0 flex:1 flex:none flex:auto应当在哪个场景中应用?
弹性盒子中 flex: 0 1 auto 表示什么意思
What does flex: 1 mean?
声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你
原文地址:flex:auto应当在哪个场景中应用?