flex-basis中0和auto区别

先明确一点，就是flex-basis作用于flex container中的item，并不是作用于flex container
还有就是，flex-basis经常于flex-grow和flex-shrink同时设置，这样才会让flex发挥更多的作用

flex-basis指的是什么

flex item没有进行伸缩前，它的大小，即flex item在主轴放下的初始大小

再说说，flex-grow： 设置flex item的伸展比率，设置其可以得到多少flex container的剩余空间

再说说，flex-shrink：设置flex item的收缩比率，设置其需要减少多少空间（flex item没收缩前的总宽度-flex container宽度，即flex container不足的空间）

flex-basis设置为0

仅设置flex-basis时

当flex item仅设置flex-basis:0时，表现上，该item会折叠到最小的宽度：

.wrapper1 {
  display: flex;
  border: 2px solid lime;
}
.item11 {
  flex-basis: 0;
}

<div class="wrapper1">
  <div class="item11">i am width 0</div>
</div>

除了设置flex-basis，还设置flex-grow时

当设置了flex-grow时，它会根据flex-grow的情况，来分配空间。分配空间时，每个flex item作为整体被考虑进来，不会对flex item的内容长短做区分。

.item1 {
  background: lightsalmon;
}
.item2 {
  background: hotpink;
}
.item3 {
  background: lightgreen;
}
.item1,
.item2,
.item3 {
  flex-grow: 1;
  flex-shrink: 1; // 目前不影响啥，因为flex-basis设置的是0，item已经是折叠到最小宽度了
  flex-basis: 0;
}

<div class="wrapper">
  <div class="item1">11111111111111111111111111111111111111111</div>
  <div class="item2">2</div>
  <div class="item3">333333333</div>
</div>

当我调整flex container的宽度时（缩小屏幕），会发现item1的宽度将固定住，剩下item2和item3在平分空间，当我再调整（再缩小屏幕），会继而发现，item3的宽度会固定住，item2占用剩下的空间，直到谁都不能再缩小

当你给item1，item2，item3设置overflow:hidden时，效果就不一样了，由于每个item的flex-grow都是1，伸展速率是一样的，而且设置的flex-basis为0，item以整体计入，不算item的内容长度，那会平分空间

小结

flex-basis设置为auto

仅设置flex-basis为auto,没啥好说的，就如width:auto一样
当和flex-grow配在一起时，flex item的内容长短会被考虑进来，分配空间分配的是item内容周围的space. 在伸缩比率一致条件下，会出现内容长度长的，占的空间大。flex-shrink也同理，只是一个是让flex item增加空间，一个是让flex item减少空间

flex-grow:1 发挥作用:

flex-shrink:1 发挥作用：

小结

再看一个例子

extra: min-width,max-width, width vs flex-basis

P.S. 以上内容如有不对，欢迎指正哦~

Refenrences：
medium.com/learnfactor… www.samanthaming.com/flexbox30/2… codepen.io/enxaneta/fu… stackoverflow.com/questions/4…