我试图使多行正方形（每行3个）具有相同的高度。

我为此编写了一些HTML和CSS，但这些框都在同一行。

到目前为止，我有以下内容:

当我用这种方式加载页面时，所有框都会出现，但它们都在一行上，超过父div的100%宽度。

---

顺晟科技：

如果使用flexbox并希望内容换行，则必须指定。默认情况下，flex项不换行。

这里的代码没有执行任何操作，因为。您需要将其移动到:

#list-wrapper {
  display: flex;
  width: 100%;
}
#list-wrapper div {
  width: 33.33%;
}
#list-wrapper div img {
  flex: 1;
}

要使图像是三叉的，您应该指定。

将您的CSS更改为这样，它就可以工作了:

#list-wrapper {
  display: flex;
  width: 100%;
}
#list-wrapper div {
  width: 33.33%;
}
#list-wrapper div img {
  flex: 1;
}

JS fiddle:https://jsfiddle.net/f47prnnt/1/

flex容器的初始设置是.

这意味着当您创建flex容器（通过应用或应用到元素）时，所有子元素（“flex项”）都被限制在一行中。

若要启用flex项以换行，请使用。

---

以下是flex属性如何工作的几个示例:

一个简单的flex容器，包含各种包含图像的flex项:

注意，只声明了一个flex属性：。这就建立了flex容器。默认情况下有以下行为:

要允许项目换行，请添加:

若要每行只允许三个项目，请使用属性:

而且，默认情况下，所有flex项的高度都相等()。

如果恢复并给容器一个高度，则伸展会更明显: