Flex-grow 没有按预期工作(弹性项目没有我期望的宽度) [英] Flex-grow not working as expected (flex items don't have the widths I expect)

问题描述

JSFiddle

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

I'm trying to use flex CSS properties to fit a set of elements into a neat little box.

它在 IE10 中看起来和我想要的完全一样，但 Chrome 显示它非常不同.我基本上有:

It looks exactly how I want it in IE10, but Chrome shows it very different. I basically have:

• 容器
  • 选择框 (flex:5)，应该足够宽以显示 D，但不能更宽.
  • 文本输入(flex:10)，应该占据contains宽度的一半多一点
  • 确认按钮 (flex:6)，应该足够宽以包含其文本，但不能太多.
  • Container
    • Select box (flex:5), should be about wide enough to show the D, but not much wider.
    • Text input (flex:10), should take up a little more than half the width of the contains
    • Confirm button (flex:6), should be wide enough to contain its text, but not much more.

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

    It works fine in IE, but in Chrome the first two elements take up 50% of the width each, leaving the confirmation button falling off the end.

    是我的 Flex 逻辑有问题，还是 Chrome 搞砸了?

    Is my Flex logic wrong, or is Chrome messing up?

    推荐答案

    flex 属性的 flex-grow 部分(第一个数字)决定了额外空间如何当它们的组合大小小于它们的 flex 容器时，应该分布在 flex 元素之间.额外的空间像这样划分:[flex-grow value]/[所有兄弟的 flex-grow 值的总和]

    The flex-grow portion of the flex property (the first number) determines how the extra space should be distributed between the flex elements when their combined size is smaller than their flex container. The extra space is divided like so: [flex-grow value] / [sum of flex-grow values for all siblings]

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

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

    This extra space is added to the element's size along the main axis to determine its final size. It is not used to determine how large the element is in relation to its flex container, that's what the flex-basis and/or width/height value when set to a percentage is for.

    当 flex 元素的组合大小大于其容器时，flex 属性的 flex-shrink 部分(第二个无单位值)就会发挥作用.基本上与flex-grow相反:比例相同，但溢出大小是从flex项中减去而不是增加.

    When the combined size of the flex elements is larger than its container, the flex-shrink portion of the flex property (the 2nd unitless value) comes into play. It is basically the reverse of flex-grow: the ratios are the same, but the overflow size is subtracted from the flex item instead of added.

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

    Opera has a very nice explanation of this property in their Flexbox basics article: http://dev.opera.com/articles/view/flexbox-basics/

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

    For your particular problem, I was able to solve it in Chrome by setting the width of the input element to a very small value:

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

    input {margin:0; width: 20px}
    

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

    This solution does not appear to work in Opera if you add the unprefixed properties. It probably won't work in Firefox either. It also makes the elements too small to be usable for non-Flexbox browsers.

    这篇关于Flex-grow 没有按预期工作(弹性项目没有我期望的宽度)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！