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

问题描述

JSFiddle

我尝试使用 flex CSS属性将一组元素适合一个整洁的小方框。

我想在IE10，但Chrome显示它非常不同。我基本上有：

• 容器
  
  
  
  • 选择框（ flex：5 ）应该足够宽，以显示 D ，但不会更宽。
  
  
  
  
  • 文本输入（ flex：10 ）应该占用一半以上的宽度。 code> flex：6 ）应该足够宽，以包含其文本，但不要太多。
  
  

它可以在IE中正常工作，但在Chrome中，前两个元素占用每个宽度的50％，留下确认按钮从结束。 >

我的Flex逻辑错了，还是Chrome乱七八糟？

解决方案

flex 属性（第一个数字）的 flex-grow 部分决定了如何在flex元素，当它们的组合大小小于它们的柔性容器时。额外的空间被划分如下： [flex-grow value] / [所有兄弟姐妹的flex-grow值的总和]

• 文本输入： 10/21


• 选择框： 5/21


• 确认按钮： 6/21






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





当flex元素的大小大于其容器的大小时， flex flex-shrink c>属性（第二无量纲值）发挥作用。它基本上是 flex-grow 的相反：比率是相同的，但溢出大小从flex项目减去而不是添加。





Opera在其Flexbox基础文章中对此属性有非常好的解释： http： //dev.opera.com/articles/view/flexbox-basics/





对于您的特定问题，我可以在Chrome中通过设置将输入元素的宽度设置为非常小的值：





http：// jsfiddle.net/JTEhW/2/

  input {margin：0; width：20px} 
  

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




JSFiddle

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

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

• 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.

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.

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

解决方案

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]

• Text input: 10 / 21
• Select box: 5 / 21
• Confirm button: 6 / 21

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.

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 has a very nice explanation of this property in their Flexbox basics article: http://dev.opera.com/articles/view/flexbox-basics/

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}

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不能按预期工作（flex项目没有我预期的宽度）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！