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的影響
這部分內容暫時不打算整理
本文目的僅僅是為了個人查找閱讀等提供方便
