html - 收缩 flex-wrapped-children 以适应带有包装的父容器

Question

我需要一个给定大小的容器，其中包含未知数量的子项（在撰写本文时），其中的图像将成行放置。我尝试了 flex 容器并有类似的东西：

display: inline-flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-evenly;
align-items:center;

见这里：https ://jsfiddle.net/4gacev6f/1/

这工作得相当好......直到我添加了几个孩子：

添加了更多子对象：https ://jsfiddle.net/4gacev6f/3/

我希望将它们包裹在几行中，但它们以单行显示。

如果有一些空间，我可以做些什么来强制 Flex 容器包装内容？

标签： htmlcssflexbox