2

JSFiddle

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

它看起来正是我在 IE10 中想要的样子，但 Chrome 显示它非常不同。我基本上有：

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

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

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

4

1 回答 1

9

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

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

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

当 flex 元素的组合大小大于其容器时，属性的flex-shrink一部分flex（第二个无单位值）开始发挥作用。它基本上是相反的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 浏览器。

于 2013-04-10T15:09:25.537 回答