Flex-grow 不按比例调整宽度

Question

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

如果我理解这一点，默认的弯曲方向是“行”......所以理论上宽度不应该全部相等。

.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 值，元素从当前宽度开始均匀增长。由于这个不同，所以最终的结果也不同