弹性布局flex或者grid元素平分，实际会被内容撑大，问题剖析

flex item 平分

控制flex元素，有三个属性控制，flex-basis，flex-shrink，flex-grow 。如果期望这些元素能自动地扩展去填充满剩下的空间，那么我们需要去控制可用空间在这几个元素间如何分配，这就是元素上的那些 flex 属性要做的事。

flex-basis 控制元素空间的大小，默认是auto，自动分配小大以充分展示元素的内容；

flex-grow 值为整数，默认是0， 分配可用空间，如果其他元素也被允许延展，那么他们会各自占据可用空间的一部分；

flex-shrink 值为整数，默认是1 处理 flex 元素收缩的问题；

元素item平分，就需要在每个item设置flex:1，即自动伸缩，每个item伸缩等级都一样！！！

某个item设置了宽度，但是还是会被缩放！！！

 例如：

grid item 平分

grid-template-columns 基于网格列的维度，定义网格的尺寸大小 ；

grid-template-columns: repeat(4,1fr)

 元素item平分，每个item都是1fr！！！

 实际过程中，item并没有平分，而是根据item的内容伸缩了，这是为啥呢？？

这时候我们来看下CSS中宽度的定义：

width：

注意点：min-width属性优先级高于width； 

min-witdh：

注意：当min-width大于width的值，min-width会覆盖max-width和width； 

注意：min-width:auto用于弹性元素的默认最小宽度 

原因： 

通过上面弹性布局和元素width分析，当元素支持收缩时，min-width默认是auto，即元素内容的宽度，所以会导致item撑出平分的宽度！！如果设置宽度，由于是弹性布局，宽度也会被伸缩！！

解决： 

如果有宽度，希望宽度不被伸缩，需要把 flex-shrink:0，不允许伸缩！！

如果是平分，元素被撑大，只需要设置 min-width:0！！

同理：height也是一致的