弯曲增长不按比例调整宽度

Question

我刚刚熟悉Flex框，当我将flex-grow：1应用于一组列时，它似乎使列高度增加，但不是宽度，这是我的目标。

如果我理解这一点，默认的弹性方向是＆＃34; row＆＃34; ...所以理论上宽度不应该相等。

.flex{display:flex}
.flex div{flex-grow:1}

/*Just for visual separation*/
.flex div:nth-child(odd){background-color:#ccc}

这是我的例子的Codepen http://codepen.io/dougmays/pen/dPWQdp

感谢

Answer 1

正如你在codepen中那样

这不起作用

.flex{display:flex;}
.flex div{flex-grow:1}

但这确实有效

.flex2{display:flex;}
.flex2 div{flex:1}

不同之处在于当你设置flex：1时你也将flex-basis设置为0px（默认值）。

在第一个示例中，缺少弹性基础值，元素从其当前宽度开始均匀增长。由于这是不同的，最终结果也是不同的