flex:0 flex:1 flex:none flex:auto应该在什么场景下使用? « 张鑫旭-鑫空间-鑫生活
之前对flex的值经常使用的可能就是flex:1了,对于其余几种值却不是很清楚它们的用法;
这篇文章,原文地址:flex:0 flex:1 flex:none flex:auto应该在什么场景下使用?终于明白了它们之间的区别及用法。
flex属性是由flex-grow, flex-shrink, flex-basis这三个属性的缩写,用法及介绍可以看这里,这就不做赘述了。
flex:initial—— flex:0 1 auto
flex:initial是flex的默认属性,具体表现为,当容器有剩余空间时不增长,当容器空间不足时会缩小,尺寸自适应内容;
效果如下所示:
代码如下所示:(下面例子代码类似,只是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 1 0% 与 flex: none —— flex: 0 0 auto
flex:0 1 0%表示flex-grow是0,flex-shrink是1,所以flex:0元素会缩小但不会扩展,在加上flex-basis:0%表示建议支持是0,因此,设置flex:0的元素的最终尺寸表现为最小内容宽度;
效果图如下所示:
flex: 0 0 auto表示flex-grow是0,flex-shrink是0,flex-basis是auto,所以元素既不会扩展也不会收缩,然后flex-basis是auto代表尺寸由内容决定,由于元素不具有弹性也就不会换行,最终表现为最大内容宽度
flex:1——flex: 1 1 0% 与 flex:auto——flex:1 1 auto
flex:1与flex:auto 两个对应的flex-grow和flex-shrink属性值都是1,只有flex-basis不同,这两种具体表现形式为,元素尺寸可以弹性增大,也可以弹性减小,在flex:1 时在尺寸不足时会优先最小化尺寸,flex:auto在尺寸不足时优先最大化内容尺寸。
效果如下所示:
上图体现了两者的区别,虽然都是充分分配容器内容,但是flex:1 的尺寸是较长的尺寸优先牺牲自己的尺寸,而flex:auto 中是较长的尺寸优先扩展自己的尺寸。
所以,flex:1 更适合在等比例列表时使用,flex:auto适用于元素充分利用剩余空间,比如头部导航文字多少不一致时使用
————————————————
版权声明:本文为CSDN博主「小白银」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/mozhu1997/article/details/109023858