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

如何让 HTML 中的 div 元素垂直堆叠而非水平并排显示

通过设置 flex-direction: column，可将 Flex 容器内的子元素（如 .card）从默认的水平排列改为垂直堆叠，从而实现逐个上下排列的效果。

通过设置 `flex-direction: column`，可将 flex 容器内的子元素（如 `.card`）从默认的水平排列改为垂直堆叠，从而实现逐个上下排列的效果。

默认情况下，display: flex 的容器使用 flex-direction: row（即横向布局），因此你的多个 .card 元素会并排显示。要让它们自上而下依次排列，只需在 .cards-wrapper 上显式指定 flex-direction: column 即可。

以下是修正后的完整 CSS 示例：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

.cards-wrapper {
  display: flex;
  flex-direction: column; /* ? 关键：启用垂直主轴 */
  justify-content: center; /* 垂直居中所有卡片（在纵向上） */
  align-items: stretch;    /* 可选：使所有卡片宽度一致撑满容器 */
  width: 90vw;
  margin: 0 auto;
  padding: 1%;
  background-color: var(--colour-element-hover);
  border-radius: var(--bord-rad);
  box-shadow: var(--shadow);
}

.card {
  display: flex;
  flex-direction: column; /* ? 推荐：确保内部内容也垂直对齐（如文字+图片） */
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0.5rem 0; /* 添加上下间距，避免卡片紧贴 */
  padding: 1%;
  background-color: var(--colour-element-background);
  border-radius: var(--bord-rad);
  box-shadow: var(--shadow);
}

⚠️ 注意事项：

justify-content: center 在 column 模式下作用于垂直方向（即沿 Y 轴居中），若希望卡片顶部对齐，可改为 justify-content: flex-start；
若需卡片间留白，推荐使用 margin-top/bottom（而非 padding），避免内边距影响整体高度计算；
align-items: stretch（默认值）会让每个 .card 宽度自动填满 .cards-wrapper，无需额外设置 width: 100%，但保留亦无害；
如后续需响应式适配（例如移动端横排、桌面端竖排），可用媒体查询切换 flex-direction。

最终效果：每个 .card 将严格按 DOM 顺序自上而下垂直排列，浅紫色背景（.cards-wrapper）完整包裹全部卡片，结构清晰、语义明确、易于维护。