flex:0 flex:1 flex:auto flex:none之间的区别

ゝ一纸荒年。 2022-12-13 14:11 264阅读 0赞

之前对flex的值经常使用的可能就是flex：1了，对于其余几种值却不是很清楚它们的用法；

这篇文章，原文地址：[flex:0 flex:1 flex:none flex:auto应该在什么场景下使用？][flex_0 flex_1 flex_none flex_auto]终于明白了它们之间的区别及用法。

flex属性是由flex-grow, flex-shrink, flex-basis这三个属性的缩写，用法及介绍可以看[这里][Link 1]，这就不做赘述了。

### flex:initial—— flex:0  1  auto ###

flex:initial是flex的默认属性，具体表现为，当容器有剩余空间时不增长，当容器空间不足时会缩小，尺寸自适应内容；

效果如下所示：

![20201012111614853.png][]

代码如下所示：（下面例子代码类似，只是flex值改变，就不做展示）

<h4>flex:initial</h4>
    <div class="container">
      <div class="iten">天高地迥</div>
      <div class="iten">觉宇宙之无穷</div>
      <div class="iten">兴尽悲来</div>
      <div class="iten">识盈虚之有数</div>
    </div>
    
    <style>
        .container{
          display: flex;
          border:1px red solid;
          width: 400px;
        }
        .container div{
          border: 1px blue solid;
          flex:initial;
        }
     </style>

### flex:0——flex: 0 0 % 与 flex: none —— flex: 0 0 auto ###

flex:0与flex:none 两个对应的flex-grow和flex-shrink属性值都是0，只有flex-basis不同；具体表现为元素尺寸不会弹性增大，也不会弹性减小。

两者的区域就在于flex-basis：0%和flex-basis:auto的区别了：

*  flex-basis：0%表示固定尺寸是0，元素不具有弹性，那么，flex:0的元素最终的尺寸为最小宽度；
 *  flex-basis: auto表示固定尺寸由内容决定，由于元素不具有弹性，因此元素内的内容不会换行，

效果图如下所示：

![20201012113201364.png][]

![20201012113402490.png][]

### flex:1——flex: 1 1  0% 与 flex:auto——flex:1 1 auto ###

flex:0与flex:none 两个对应的flex-grow和flex-shrink属性值都是1，只有flex-basis不同,这两种具体表现形式为，元素尺寸可以弹性增大，也可以弹性减小，在flex:1 时在尺寸不足时会优先最小化尺寸，flex:auto在尺寸不足时优先最大化内容尺寸。

效果如下所示：

![20201012114101292.png][]

![20201012114420348.png][]

上图体现了两者的区别，虽然都是充分分配容器内容，但是flex：1 的尺寸是较长的尺寸优先牺牲自己的尺寸，而flex:auto 中是较长的尺寸优先扩展自己的尺寸。

所以，flex:1 更适合在等比例列表时使用，flex：auto适用于元素充分利用剩余空间，比如头部导航文字多少不一致时使用

![20201012114937868.png][]

[flex_0 flex_1 flex_none flex_auto]: https://www.zhangxinxu.com/wordpress/2020/10/css-flex-0-1-none/
[Link 1]: https://www.zhangxinxu.com/wordpress/2019/12/css-flex-deep/
[20201012111614853.png]: /images/20221123/e92a97800b974c1fbdfc9eeb64c9e05d.png
[20201012113201364.png]: /images/20221123/0bdccd07b3d441ea8ac43f459ad41081.png
[20201012113402490.png]: /images/20221123/3d9b2cdbebd2469c9b5ac8d92d2fc269.png
[20201012114101292.png]: /images/20221123/dcbf32d2660744e4b035af6a07c112de.png
[20201012114420348.png]: /images/20221123/0241183a2195477ea72e79ffa128786b.png
[20201012114937868.png]: /images/20221123/cffcc0757d814ada8f2a3ee794c2d91f.png