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 auto 和flex: 1的区别是啥？flex: 1其实就是flex: 1 1 0，auto又auto了什么？
最佳答案
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
其他回答(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中的文字内容长度各不一样？
请按照上面的总结进行验证。
是的，当div中文本长度不一样，div会进行缩放，但是文本长度并没有达到div的宽度
