如何将多个弹性框居中

Question

我正在学习 CSS，所以这可能是一个愚蠢的问题。我不明白为什么即使我有 flex-flow: column; 项在一行中。

我为整个身体创建了一个 flex 容器。然后一些孩子flex div。父容器应将子项放在列中。然后我想使用 children css 属性来更好地管理他们的内容。从我的代码笔中可以看出，有 6 张卡片和 3 张卡片。理论上，视频应该放在 6 张卡片下面，其他 3 张卡片上面，因为它们包含在 3 个不同的 div 中，我哪里出错了？

CodePen 链接：

https://codepen.io/vujinbaku/pen/MWmgdvq

Answer 1

在第 43 行中，您有一个 div 开始标记而不是 div 结束标记。同样在第 50 行，您忘记在 h3 之后关闭 div 标签。

Answer 2

如果您检查，您会看到大部分代码位于 <div class="part> 下。这是因为您有未关闭的 div 标签。执行以下步骤。

1. 在 line: 29 中，通过将 <div> 替换为 <div> 来关闭 </div> 标记。
2. 在 line: 43 中，通过将 <div> 替换为 <div> 来关闭 </div> 标记。

在您学习 Web 开发的过程中，我建议您探索最佳实践，例如对代码进行分段。这有助于有效调试。