css - Flex-grow 不按比例调整宽度

Question

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

如果我理解这一点，默认的 flex-direction 是“行”……所以理论上宽度不应该都相等。

.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

正如你在代码笔中所做的那样

这行不通

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

但这确实有效

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

不同之处在于，当您设置 flex:1 时，您还将 flex-basis 设置为 0px(默认值)。

在第一个示例中，缺少 flex-basis 值，元素从当前宽度开始均匀增长。既然这样不同，最后的结果也就不同