flex:initial
flex: initial【預設值】等同于flex: 0 1 auto ，flex容器有剩餘空間時其尺寸不會增長（flex-grow:0），在flex容器尺寸不足時尺寸會收縮變小（flex-shrink:1），同時目前應用flex:initial的元素的尺寸自适應于内容（flex-basis:auto）
使用場景
flex:0
flex:0等同于設定flex:0 1 0%，元素尺寸不會彈性增大（flex-grow:0）,但是會彈性收縮(flex-shrink:1），考慮到此時flex-basis屬性值是0%，表示基礎尺寸是0，是以設定flex:0的元素尺寸表現為最小内容寬度，也就是文字會呈現“一柱擎天”的效果。
使用場景
flex:none
flex:none等同于設定flex:0 0 auto，flex子項沒有彈性，此時flex-basis屬性值是auto，即基礎尺寸由内容決定，是以設定flex:none的元素最終尺寸通常表現為最大内容寬度。
使用場景
<div class="container">
<img src="1.jpg">
<p>右側按鈕沒有設定flex:none，表現為最小内容寬度。</p>
<button>按鈕</button>
</div>
<div class="container">
<img src="1.jpg">
<p>右側按鈕設定了flex:none，按鈕正常顯示了。</p>
<button class="none">按鈕</button>
</div> .container {
display: flex;
padding: .5rem;
border: 1px solid lightgray;
background-color: #fff;
}
img {
width: 3rem; height: 3rem;
margin-right: .5rem;
}
button {
align-self: center;
padding: 5px;
margin-left: .5rem;
}
.none {
flex: none;
} flex:1
flex:1等同于設定flex:1 1 0%，元素尺寸可以彈性增大，也可以彈性減小，在容器尺寸不足時會優先最小化内容尺寸，
使用場景
還适用于無規律布局中動态内容元素，效果見
https://demo.cssworld.cn/new/6/2-10.php
flex:auto
flex:auto等同于設定flex:1 1 auto，元素尺寸可以彈性增大，也可以彈性減小，在容器尺寸不足時會優先最大化内容尺寸。
使用場景
<nav class="flex">
<span>首頁</span>
<span>排行榜</span>
<span>我的訂單</span>
<span>個人中心</span>
</nav> nav span {
flex: auto;
line-height: 3rem;
background: #444;
color: #fff;
text-align:center;
}
span + span {
border-left: 1px solid #eee;
}