背景

最近的一个需求里做了一个布局，按照循环列表展示的每一条布局大概长这样。

但是我发现，每当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?