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也是一致的
