flex:auto应当在哪个场景中应用?

环境

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

但我发觉，每每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?