首页 新闻 会员 周边

flex: 1 1 auto引发的问题

0
悬赏园豆:20 [已解决问题] 解决于 2024-02-27 08:26
<div class="parent">
	<div class="child" style="background-color: #66ee66">
      111
	</div>
	<div class="child" style="background-color: #6666ee">
      222
	</div>
	<div class="child" style="background-color: #ee6666">
      333
	</div>
</div>
.parent{
  display:flex;
}
.child{
  display:flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
}

我理解的flex: 1 1 auto:如果子div没有被撑到,那么平均分配子div,如果被撑到,那么子div就进行伸缩以适应。
问题来了,如果我三个子div里面的文字均没有撑到子div,但是子div却进行了不同程度的缩放。当我把 flex: 1 1 auto 换成了flex: 1,就是我想要的效果了
那么, flex: 1 1 autoflex: 1的区别是啥?flex: 1其实就是flex: 1 1 0auto又auto了什么?

echo_lovely的主页 echo_lovely | 小虾三级 | 园豆:1346
提问于:2024-02-23 15:32
< >
分享
最佳答案
0

在CSS中,flex: 1 与 flex: 1 1 auto 之间确实存在一些微妙的区别。让我们逐步解释这两种情况:

flex: 1:

这表示了一个简写形式,相当于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%;。
其中 flex-grow: 1 表示当容器有剩余空间时,子项将使用剩余空间,且所有子项的增长率相同。
flex-shrink: 1 表示当空间不足时,子项将按比例缩小,且所有子项的缩小比例相同。
flex-basis: 0% 表示子项的初始大小为0%。这意味着子项的大小将由 flex-grow 和 flex-shrink 属性来决定。
flex: 1 1 auto:

这也是 flex 属性的一种写法,它分别设置了 flex-grow、flex-shrink 和 flex-basis。
flex-grow: 1 表示子项会在有剩余空间时,按比例分配剩余空间,所有子项的增长率相同。
flex-shrink: 1 表示当空间不足时,子项会按比例缩小,所有子项的缩小比例相同。
flex-basis: auto 表示子项的初始大小由其内容来确定。这意味着子项的大小将由其内容决定,而不是初始设置为0%。
所以,主要区别在于 flex-basis 的值不同。在 flex: 1 中,子项的初始大小被设置为0%,而在 flex: 1 1 auto 中,子项的初始大小由内容决定。这可能会导致在没有内容撑开子项时,两种情况的表现不同。

收获园豆:20
Technologyforgood | 大侠五级 |园豆:6766 | 2024-02-25 13:22
其他回答(1)
-1

我之前也没分清楚。后来,总结了下:

1.如果容器(你的parent div)有足够的空间,flex:1和flex:auto都会平分剩余空间,但是flex:auto会保持项目本身的最小宽度,而flex:1不会。
2. 如果容器(你的parent div)没有足够的空间,flex:1会优先压缩内容,使得所有项目都能等分空间,而flex:auto会优先保持内容的完整性,挤压其他项目的空间。

因此,我猜想你问题中提到的“如果我三个子div里面的文字均没有撑到子div,但是子div却进行了不同程度的缩放”,是不是3个子div中的文字内容长度各不一样?

请按照上面的总结进行验证。

程序视点 | 园豆:202 (菜鸟二级) | 2024-02-23 23:35

是的,当div中文本长度不一样,div会进行缩放,但是文本长度并没有达到div的宽度

支持(0) 反对(0) echo_lovely | 园豆:1346 (小虾三级) | 2024-02-24 10:57
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册