Flex-grow不能按预期工作(flex项目没有我期望的宽度)

Question

的jsfiddle

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

它看起来在IE10中看起来我想要它,但Chrome显示它非常不同.我基本上有:

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

它在IE中运行良好,但在Chrome中,前两个元素占据了宽度的50%,使得确认按钮不再有效.

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

Answer 1

属性的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-shrink部分flex(第二无单位值)起作用.它基本上是相反的flex-grow:比率相同,但溢出大小从flex项中减去而不是添加.

Opera在其Flexbox基础知识文章中对此属性进行了非常好的解释:http://dev.opera.com/articles/view/flexbox-basics/

对于您的特定问题,我可以通过将input元素的宽度设置为一个非常小的值来解决它:

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

input {margin:0; width: 20px}

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