Html Flex容器使我的div不会转到下一行

我是flex容器的新手，但我正在尝试一个带有justify:space的容器，并在其中包含一些div。如果屏幕变得太小，内部div应该间隔到下一行，但是内部div顽固地停留在同一行上，只是奇怪地调整它们的宽度

.container{
  display: flex;
  justify-content: space-around;
}
.inner-div{
  width: 40%;
  display: inline-block;
}

---

你可能会想，如果容器中有三个内部div，那么第三个就会转到下一行，考虑到它们都有宽度：40%，但是它们会保持在同一行上，挤压第一个然后是第二个div。

为了实现这一点，我建议您使用媒体查询而不是flex，因此，您可以控制不同的分辨率/设备大小。

将flex wrap设置为wrap。我一小时前刚刚回答了同样的问题。 柔性包裹：包裹；在这种情况下会起作用

CSS flex wrap属性用于指定是将flex项强制放入单行还是包装到多行。flex wrap属性允许启用行堆叠的控制方向。它用于指定flex容器内flex项的单行或多行格式

---

语法：flex wrap:nowrap | wrap | wrap reverse | initial

这是一个非常糟糕的建议。媒体查询只能在需要时使用。此处无需使用媒体查询，因为可以使用属性flex wrap。感谢@phwt格式化我的答案，我将在下次处理它：