Flex-grow 没有按预期工作（弹性项目没有我期望的宽度）

Posted 2023-03-06

【中文标题】Flex-grow 没有按预期工作（弹性项目没有我期望的宽度）

【英文标题】：Flex-grow not working as expected (flex items don't have the widths I expect)

【发布时间】：2013-04-02 09:07:28

【问题描述】：

JSFiddle

我正在尝试使用flex CSS 属性将一组元素放入一个整洁的小盒子中。

它在 IE10 中看起来完全符合我的要求，但 Chrome 显示它非常不同。我基本上有：

容器 选择框 (flex:5) 的宽度应足以显示 D，但不要宽太多。 文本输入 (flex:10)，应占包含宽度的一半多一点 确认按钮 (flex:6)，应该足够宽以包含其文本，但不要太多。

它在 IE 中运行良好，但在 Chrome 中，前两个元素各占宽度的 50%，使确认按钮从末尾脱落。

是我的 Flex 逻辑错误，还是 Chrome 搞砸了？

【问题讨论】：

-webkit-box-pack 来自 2009 规范，应该是 -webkit-justify-content。

【参考方案1】：

flex 属性的flex-grow 部分（第一个数字）决定了当弹性元素的组合大小小于其弹性容器时，额外空间应如何在弹性元素之间分配。多余的空间是这样划分的：[flex-grow value] / [sum of flex-grow values for all siblings]

文字输入：10 / 21 选择框：5 / 21 确认按钮：6 / 21

这个额外的空间被添加到元素沿主轴的大小以确定其最终大小。它不用于确定元素相对于其 flex 容器的大小，这就是设置为百分比时的 flex-basis 和/或宽度/高度值的用途。

当 flex 元素的组合大小大于其容器时，flex 属性的flex-shrink 部分（第二个无单位值）开始发挥作用。它基本上是flex-grow 的反面：比率是一样的，但是溢出的大小是从弹性项目中减去而不是添加。

Opera 在他们的 Flexbox 基础文章中对此属性有很好的解释：http://dev.opera.com/articles/view/flexbox-basics/

对于您的特定问题，我可以在 Chrome 中通过将输入元素的宽度设置为一个非常小的值来解决它：

http://jsfiddle.net/JTEhW/2/

input margin:0; width: 20px

如果您添加不带前缀的属性，此解决方案似乎在 Opera 中不起作用。它可能在 Firefox 中也不起作用。它还使元素太小而无法用于非 Flexbox 浏览器。

【讨论】：

我确实尝试将 flex-basis 设置为 30%（它在小提琴中），但这是不行的。您可以在这里看到为什么小值起作用：***.com/questions/14962468/…。请记住，宽度不必特别小，只要足够小以使其适合（30% 有效）。