我正在尝试使用flex CSS 属性将一组元素放入一个整洁的小盒子中。
它在 IE10 中看起来完全符合我的要求，但 Chrome 显示它非常不同。我基本上有：
flex:5) 的宽度应足以显示 D，但不要宽太多。flex:10)，应占包含宽度的一半多一点flex:6)，应该足够宽以包含其文本，但不要太多。它在 IE 中运行良好，但在 Chrome 中，前两个元素各占宽度的 50%，使确认按钮从末尾脱落。
是我的 Flex 逻辑错误，还是 Chrome 搞砸了？
【问题讨论】：
-webkit-box-pack 来自 2009 规范，应该是 -webkit-justify-content。
标签： css google-chrome internet-explorer-10 flexbox
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 中通过将输入元素的宽度设置为一个非常小的值来解决它：
input {margin:0; width: 20px}
如果您添加不带前缀的属性，此解决方案似乎在 Opera 中不起作用。它可能在 Firefox 中也不起作用。它还使元素太小而无法用于非 Flexbox 浏览器。
【讨论】：