如何让 HTML 中的 div 元素垂直堆叠排列（而非水平并排）？-html教程-PHP中文网

如何让 HTML 中的 div 元素垂直堆叠排列（而非水平并排）？

通过为容器设置 display: flex 并添加 flex-direction: column，可使子 div 沿垂直方向依次排列，实现上下堆叠效果，同时保留 flexbox 的布局灵活性与响应式优势。

通过为容器设置 display: flex 并添加 flex-direction: column，可使子 div 沿垂直方向依次排列，实现上下堆叠效果，同时保留 flexbox 的布局灵活性与响应式优势。

默认情况下，Flex 容器的 flex-direction 值为 row，这会导致子元素（如 .card）水平并排显示。要改为垂直堆叠，只需在 .cards-wrapper 中显式声明：

.cards-wrapper {
  display: flex;
  flex-direction: column; /* 关键：改为纵向主轴 */
  justify-content: center; /* 垂直居中所有卡片（在纵向上）*/
  width: 90vw;
  margin: 0 auto;
  padding: 1%;
  background-color: var(--colour-element-hover);
  border-radius: var(--bord-rad);
  box-shadow: var(--shadow);
}

⚠️ 注意事项：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

justify-content: center 在 column 方向下控制的是垂直方向上的对齐（即卡片整体在容器中上下居中），若希望卡片顶部对齐，可改为 justify-content: flex-start；
若需在卡片之间添加间距，推荐使用 gap: 1rem（现代、简洁、无需额外 margin），例如：
```
.cards-wrapper {
  /* ...其他样式 */
  gap: 1.2rem; /* 自动为相邻卡片添加垂直间距 */
}
```
避免在 .card 内重复使用 display: flex 和 justify-content: center，除非你确实需要居中其内部内容（如
和）；当前结构下该设置是合理的，但需注意它影响的是卡片内部布局，而非卡片之间的排列。

✅ 最终效果：每个 .card 将严格按 HTML 顺序从上到下依次排列，.cards-wrapper 的浅紫色背景和圆角阴影将完整包裹所有卡片，形成清晰、整洁的垂直卡片流。这是现代 CSS 中最语义明确、兼容性良好（支持所有主流浏览器）的解决方案。