flex-basis比我想象的复杂多了

这是我参与「第五届青训营」伴学笔记创作活动的第 6 天

先分享一个我之前写的帮助学习flex的小玩意吧（没怎么学过flex的hxd可以试试）

flex其他的属性我也就不介绍了（介绍的文章太多了）我就说一下今天遇到的flex-basis的问题

首先，flex-basis定义是flex-basis 属性用于设置或检索弹性盒伸缩基准值，好像明白了但是又完全没明白的。我的理解就是，item在填入flex容器前的尺寸，也就是item的理想尺寸。既然是理想的，所以并不是最终的实际大小。

当flex-basis和width同时存在时，width是不起效的：

    width:100px;
    flex-basis: 80px;

他还是80px。

那分别设置width和flex-basis是一个相同的值会怎么样呢

#main div:nth-of-type(1) {
    width:100px;
}
#main div:nth-of-type(2) {
   flex-basis: 100px;
}

看起来两个块块是一模一样的，但是如果我们加上一定量的内容，我们就可以轻松地发现

#main div:nth-of-type(1) {
    width:50px;
}
#main div:nth-of-type(2) {
   flex-basis: 50px;
}

<div id="main">

  <div style="background-color:lightblue;">aaaaaaaaaaaa</div>
  <div style="background-color:khaki;">bbbbbbbbbbbb</div>
 
</div>

设置的是width的div的内容不会撑大div（剩余部分不是隐藏了，是被黄色的盖住了，文字是会写超div的大小的），但是flex-basis的会

这里就可以总结一下了，在flex下，item的宽度只受flex-basis的设置（max-width和min-width也有效），在设置了flex-basis之后，width就完全没效果了；flex-basis的值受内容宽度的影响，如果没有人为设置flex-basis，它的默认值是auto，这个时候就受width也就是内容宽度的影响了。