Html 为什么弹性物品没有包装？

我正在尝试制作多行具有相同高度的正方形（每行3个）

我已经为此编写了一些HTML和CSS，但是所有的框都在同一行上

以下是我目前掌握的情况：

#列表包装器{
显示器：flex；
宽度：100%；
}
#列表包装器div{
宽度：33.33%；
}
#列表包装器div img{
弹性：1；
}

---

如果您使用的是flexbox，并且希望对内容进行包装，则必须指定

flex-wrap:wrap

。默认情况下，弹性项不换行

这里的代码没有执行任何操作，因为

#list wrapper div img

的父级不是

display:flex

。您需要将其移动到

#list wrapper div

：

#list-wrapper div img {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

要使图像具有三个交叉点，您应该指定

flex-basis: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:

flex容器的初始设置为

这意味着，当您创建flex容器时（通过将

display:flex

或

display:inline flex

应用于元素），所有子元素（“flex项”）都被限制在一行中

要启用弹性项目包装，请使用

flex-wrap:wrap

---

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

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

#列表包装器{
显示器：flex；
边框：1px纯黑；
}
#列表包装器div{}
#列表包装器div img{
高度：150像素；
宽度：150px；
}