我正在尝试使多行的方块（每行3个）有相同的高度。
我已经为此写了一些HTML和CSS，但是这些框都在同一行上。
到目前为止，我所得到的是:
null
#list-wrapper {
display: flex;
width: 100%;
}
#list-wrapper div {
width: 33.33%;
}
#list-wrapper div img {
flex: 1;
}<div id="list-wrapper">
<div>
<img src="images/1.png" alt="image one" />
</div>
<div>
<img src="images/2.png" alt="image two" />
</div>
<div>
<img src="images/1.png" alt="image one" />
</div>
<div>
<img src="images/2.png" alt="image two" />
</div>
<div>
<img src="images/1.png" alt="image one" />
</div>
<div>
<img src="images/2.png" alt="image two" />
</div>
</div>null
当我用这个加载页面时，所有的框都会出现，但是它们都在一行上，超过了父div的100%宽度。
如有任何帮助，我们将不胜感激。
flex容器的初始设置是flex-wrap:nowrap。
这意味着当您创建一个flex容器（通过将display:flex或display:inline-flex应用于元素）时，所有子元素（“flex项”）都被限制在单行中。
若要使flex项能够包装，请使用flex-wrap:wrap。
下面是flex属性如何工作的几个示例:
一个简单的flex容器，具有包含图像的各种flex项:
null
#list-wrapper {
display: flex;
border: 1px solid black;
}
#list-wrapper div {}
#list-wrapper div img {
height: 150px;
width: 150px;
}<div id="list-wrapper">
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
<div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
</div>
如果您使用的是flexbox并希望内容换行，则必须指定flex-wrap:wrap。默认情况下，flex项不换行。
由于#list-wrapper div img的父项不是display:flex，所以这里的代码没有执行任何操作。您需要将其移动到#list-wrapper div:
#list-wrapper div img {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
要使图像是三叉的，您应该指定flex-base:33.33333%。
将您的CSS更改为此，它将工作:
#list-wrapper {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 100%;
flex-wrap: wrap;
}
#list-wrapper div {
flex: 0 0 33.333%;
}
JS Fiddle:https://jsfiddle.net/f47prnnt/1/
