我正在尝试使用flex CSS属性将一组元素放入一个整洁的小方框中。
它看起来我想在IE10中如何，但Chrome显示它非常不同。我基本上有：
flex:5），应该足够宽，以显示D，但不会更宽。flex:10），应该占据包含宽度的一半多一点flex:6）应足够宽，以包含其文字，但不多。它在IE中工作正常，但在Chrome中，前两个元素占据了宽度的50％，使得确认按钮不在最后。
我的Flex逻辑是错误的，还是Chrome搞砸了？
答案 0 :(得分：9)
flex-grow属性的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-shrink属性的flex部分（第2个无单位值）将起作用。它基本上与flex-grow相反：比率相同，但溢出大小从flex项中减去而不是添加。
Opera在其Flexbox基础文章中对此属性进行了非常好的解释：http://dev.opera.com/articles/view/flexbox-basics/
对于您的特定问题，我可以通过将输入元素的宽度设置为一个非常小的值来解决它：
input {margin:0; width: 20px}
如果添加未加前缀的属性，此解决方案似乎在Opera中不起作用。它可能也不适用于Firefox。它还使元素太小而无法用于非Flexbox浏览器。