Html 使用flexbox将多个元素居中-flex flow：行换行将每个子元素放在单独的行中

我的布局如下：

.app容器{
显示器：flex；
柔性流：行换行；
对齐内容：居中对齐；
证明内容：周围的空间；
最小高度：100vh；
背景色：#4caf50；
字体系列：“Roboto”，“Noto”，无衬线；
字体大小：14px；
字体大小：正常；
颜色：rgba（0,0,0,0.87）；
边缘底部：84px；
}
.卡片{
背景色：#fff；
盒影：2px2p2pRGBA（0,0,0,0.12）；
利润率：8px；
边界半径：2px；
最小宽度：304px；
最大宽度：466px；
字体系列：“Roboto”，“Noto”，无衬线；
柔性生长：1；
}
.卡片.文本{
填充：16px 16px 25px 16px；
字体大小：14px；
}

一个

两个

一个

一个

两个

三

四

一个

两个

三

我相信这就是您要找的

.app容器{
显示器：flex；
柔性流：行换行；
对齐内容：居中对齐；
证明内容：周围的空间；
对齐项目：居中；
最小高度：100vh；
背景色：#4caf50；
字体系列：“Roboto”，“Noto”，无衬线；
字体大小：14px；
字体大小：正常；
颜色：rgba（0,0,0,0.87）；
边缘底部：84px；
}
.卡片{
背景色：#fff；
盒影：2px2p2pRGBA（0,0,0,0.12）；
利润率：14px；
边界半径：2px；
最小宽度：120px；
最大宽度：120px；
字体系列：“Roboto”，“Noto”，无衬线；
柔性生长：1；
}
.卡片.文本{
填充：16px 16px 25px 16px；
字体大小：14px；
}

一个

两个

一个

一个

两个

三

四

一个

两个

三

一个

两个

一个

一个

两个

三

四

一个

两个

三

一个

两个

三

将display flex放在“cards”容器（内容容器）上。为了不让内容容器变得更加混乱，仍然遇到同样的问题。这与我发布的代码有什么不同？据我所知，CSS规则是相同的。它也不能解决同一行中的每个元素都是相同高度的问题…你不希望它们是相同的高度吗？是的，我想这个问题可以用更好的措辞，我会编辑它。是的，它可以更好，这是你的问题，伙计：“所以卡片的高度保持不变”更新。更好，更糟？