如何应用flex grow

Question

我试图创建一个增长为2的flex行，然后创建一个wrap，但不明白为什么它不能正常工作。

这是CSS和HTML。

.flex {
height: 50px;
width: 50px;
background-color: black;
} 
.flex1 {
height: 50px;
width: 50px;
background-color: yellow;
margin-left: 50px;
} 
.flex2 {
height: 50px; 
width: 50px; 
background-color: green; 
margin-left: 50px;
} 
.flexcontainer {
display: flex; 
flex-wrap: wrap;
flex-grow: 2;
flex-direction: row;
}

<div class="flexcontainer">
<div class="flex">
<div class="flex1">
<div class="flex2">
</div>
</div>
</div>
</div>

Answer 1

实现flex grow的方式是完全错误的，因为flex grow必须应用于子元素，如下面的代码片段所示。

#content {
display: flex;
justify-content: space-around;
flex-flow: row wrap;
align-items: stretch;
}
.box {
flex-grow: 1;
border: 3px solid rgba(0,0,0,.2);
}
.box1 {
flex-grow: 2;
border: 3px solid rgba(0,0,0,.2);
}

<h4>This is a Flex-Grow</h4>
<div id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
<div class="box1" style="background-color:brown;">D</div>
<div class="box1" style="background-color:lightgreen;">E</div>
<div class="box" style="background-color:brown;">F</div>
</div>

要阅读更多关于flex grow的信息，您应该从中学习：https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow