flex-basis 与 width 的区别

最简单的flex-basis完全覆盖width的情况就不再多提！
直接说冷门的注意点
Ⅰ：在只写了basis、或者是basis >width的情况下，basis的值代表这个元素的最小宽度！往这个元素里面添加内容时，这个元素的宽度会随着内容的增加而被继续被撑大。

  .content{
    flex-basis: 100px;
  }
  content就是里面的三个小盒子。
  宽度都为100，但是第一个被内容撑开了

可以看见在三个盒子flex-basis值相同的情况下，第一个被内容完全撑开了！

Ⅱ：在设置了width也设置了basis，且basis < width的情况下，basis就会被作为最小宽度，而width就会作为这个容器可以被撑开的最大宽度！

.content{
 width: 150px;
  flex-basis: 100px;
}

可以看见，第一个内容区虽然回被撑开，但是也只会最多撑开到150px.多余的文字会溢出。

Ⅲ：以及如果内容区被不换行的文字填充到大于本身宽度时，那么这个内容区就将不参与压缩了。
如果想让内容区正常的话，最好加上word-break:break-word（这个是让文字换行）
可以防止英文撑大容器导致出错。