Html Flexbox不工作-它似乎只适用于某些子元素？

所以在我的代码中，我有一个新闻页面，其中container设置为flexbox。img网格容器中有23个卡片容器，其中包含图像等。之前（在img网格容器中）所有卡片都正确对齐。但是，现在只有一部分子元素继承了flexbox，但最后的9个项目没有继承。张贴一些照片。这是我的密码。我知道HTML中有很多代码，但其中很多只是容器的重复，我是新的：（-附上了一个屏幕截图，我希望所有图像都像左边的薄图像一样排成一行。谢谢。

.img网格{
宽度：70vw；
高度：90vh；
显示器：flex；
柔性包装：nowrap；
调整内容：灵活启动；
填充：2rem；
溢出：滚动；
溢出x：隐藏；
}
.新闻资讯{
宽度：350px；
高度：460px；
填充：1.5雷姆；
前景：1 000；
}
.卡片{
宽度：100%；
身高：100%；
变换样式：保留-3d；
过渡：所有0.5s线性；
字体系列：Helvetica，无衬线；
字体大小：粗体；
}
.按信息：悬停.卡片{
变换：旋转（-180度）；
}
.脸{
位置：绝对位置；
宽度：100%；
身高：100%；
背面可见性：隐藏；
文本对齐：居中；
}
.正面img{
宽度：100%；
身高：100%；
}
.正面{
背景图像：var（--梯度）；
背景大小：400%；
背景位置：右；
变换：旋转（180度）；
框大小：边框框；
填充：2rem；
颜色：黑色；
过渡：背景位置放松0.8秒；
}
.脸.背：聚焦{
背景位置：左；
}
.背{
转换：大写；
字号：1rem；
}
.脸.背{
字号：2rem；
}

雨杂志->采访：梁参孙

您缺少一个关闭标签

<a href="">Rain Magazine -> Interview: Samson Leung

Rain杂志->采访：梁参孙

查看代码片段的缩进。您至少缺少了一个关闭标记。我认为@Turnip发现了问题——如果您将代码放入W3 HTML验证程序，您会发现您有一些格式错误的标记问题——缺少关闭标记等等。浏览器通常会尽力猜测您的意图它不是万无一失的，而且可能会导致一些奇怪的行为。我建议在编辑器中安装一些linting插件来突出显示错误，并修复所有错误，看看这是否解决了问题。