css - Flex-grow 没有按预期工作( flex 元素没有我期望的宽度)

Question

JSFiddle

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

它在 IE10 中看起来完全符合我的要求，但 Chrome 显示的却大不相同。我基本上有:

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

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

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

Answer 1

flex 属性的 flex-grow 部分(第一个数字)决定了当 flex 元素的组合大小小于他们的 flex 容器。额外的空间是这样划分的:[flex-grow value]/[sum of flex-grow values for all siblings]

• 文本输入:10/21
• 选择框:5/21
• 确认按钮:6/21

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

当 flex 元素的组合尺寸大于其容器时，flex 属性的 flex-shrink 部分(第二个无单位值)开始发挥作用。它基本上与 flex-grow 相反:比率相同，但溢出大小从 flex 元素中减去而不是添加。

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

对于您的特定问题，我能够通过将输入元素的宽度设置为非常小的值在 Chrome 中解决它:

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

input {margin:0; width: 20px}

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