css中flex: initial、flex:0、flex:1、flex:none、flex:auto的区别和使用场景

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，元素尺寸可以弹性增大，也可以弹性减小，在容器尺寸不足时会优先最大化内容尺寸。

使用场景

flex:auto多用于内容固定和内容可控的布局场景，例如导航数量不固定且每个导航文字数量也不固定的导航效果就适合使用flex: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;
}