flex-basis表示在flex items 被放入flex容器之前的大小，也就是items的理想或者假设大小，但是并不是其真实大小，其真实大小取决于flex容器的宽度，flex items的min-width,max-width等其他样式，具体分析看下文
1. width和flex-basis同时存在时
.flex-wrap{
display: flex;
width: 600px;
height: 100px;
border: 1px solid #ddd;
}
.flex-item{
width: 200px;
flex-basis: 100px;
}
.item1{
background: #66efab;
}
.item2{
background: #efe24e;
}
.item3{
background: #ef6754;
}
.item4{
background: #ef9fef;
}
.item5{
background: #191def;
}
<div class="flex-wrap">
<div class="flex-item item1">item1</div>
<div class="flex-item item2">item2</div>
<div class="flex-item item3">item3</div>
<div class="flex-item item4">item4</div>
<div class="flex-item item5">item4</div>
</div>
展示结果
image1.png
分析：
当flex-basis和width属性同时存在时，width属性不生效，flex item的宽度为flex-basis设置的宽度
2. 只存在width情况，且flex items宽度和大于flex容器宽度
// 仅展示修改部分
.flex-item{
/*flex-basis: 100px;*/
width: 200px;
}
.item1{
background: #66efab;
width: 100px;
}
展示结果
image2.png
所有flex item等比例被压缩到充满flex容器
结果分析:
当flex空间不够时，由于flex-shrink的默认值为1，所以所有flex items容器等比例被压缩
3. 当存在flex-basis，所有的flex item是宽度之和大于flex容器宽度
// 仅展示修改的代码
.flex-item{
flex-basis: 300px;
width: 200px;
}
.item1{
background: #66efab;
}
展示结果
image3.png
结果分析：
这种情况同2类似，都是在flex-shrink的作用下等比例缩小
4. max-width对flex items宽度的影响
//仅展示修改部分
.flex-item{
flex-basis: 300px;
max-width: 100px;
}
.item1{
background: #66efab;
}
展示结果
image4.png
结果分析:
max-width决定了flex items的最大宽度
5. min-width对flex items宽度的影响
// 仅展示修改内容
.flex-item{
flex-basis: 80px;
min-width: 100px;
}
.item1{
background: #66efab;
}
image5.png
结果分析：
min-width决定了flex items的最小宽度
6. flex items的应用准则
content -> width -> flex-basis (limted by max|min-width)
注：当flex items的宽度和大于flex容器的宽度是，flex items的宽度还是会缩小
7. 关于其他属性对flex items的影响
这部分内容暂时不打算整理
本文目的仅仅是为了个人查找阅读等提供方便
