我正在使用一个flex框显示8个项目，这些项目将动态调整我的页面大小。如何强制它将项目拆分为两行？（每行4个）？
以下是相关片段：
（或者如果您更喜欢jsfiddle-http://jsfidle.net/vivmaha/oq6prk1p/2/)
null
.parent-wrapper {
height: 100%;
width: 100%;
border: 1px solid black;
}
.parent {
display: flex;
font-size: 0;
flex-wrap: wrap;
margin: -10px 0 0 -10px;
}
.child {
display: inline-block;
background: blue;
margin: 10px 0 0 10px;
flex-grow: 1;
height: 100px;
}<body>
<div class="parent-wrapper">
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
</body>null
容器上有flex-wrap:wrap。这很好，因为它覆盖了默认值，即nowrap(source)。这就是项目在某些情况下不进行包装以形成网格的原因。
在这种情况下，主要问题是flex项上的flex-grow:1。
flex-grow属性实际上并不调整flex项的大小。它的任务是在容器（源）中分配空闲空间。所以无论屏幕大小有多小，每个项目都会收到线上按比例分配的一部分空闲空间。
更具体地说，您的容器中有八个flex项。使用flex-grow:1，每一个都接收行上1/8的可用空间。由于项目中没有内容，它们可以收缩到零宽度，并且永远不会换行。
解决方法是在项上定义宽度。试试看：
null
.parent {
display: flex;
flex-wrap: wrap;
}
.child {
flex: 1 0 21%; /* explanation below */
margin: 5px;
height: 100px;
background-color: blue;
}<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>