使用 CSS Flexbox 的 flex-direction: column 可将容器内子元素（如 .card）从默认的水平排列改为自上而下的垂直堆叠，配合已有的 .cards-wrapper 样式即可实现单列布局。
使用 css flexbox 的 `flex-direction: column` 可将容器内子元素（如 `.card`）从默认的水平排列改为自上而下的垂直堆叠，配合已有的 `.cards-wrapper` 样式即可实现单列布局。
默认情况下，display: 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);
}⚠️ 注意：justify-content: center 在 column 模式下控制的是垂直方向上的对齐（即所有卡片在 .cards-wrapper 高度内居中），若希望卡片顶部对齐、留出上边距，可改用 justify-content: flex-start；若需卡片间等距分布，可尝试 justify-content: space-between 或 space-around。
此外，.card 本身无需 display: flex 即可正常显示内容——除非你确需对其内部 <p> 和 <img> 做特殊对齐（例如水平居中图文）。若仅需基础垂直流式布局，可简化为：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
.card {
width: 100%;
margin: 1rem auto; /* 推荐用 rem/em 替代固定百分比 margin，提升可访问性 */
padding: 1%;
background-color: var(--colour-element-background);
border-radius: var(--bord-rad);
box-shadow: var(--shadow);
}✅ 最终效果：每个 .card 将独占一行，自上而下依次排列，外层 .cards-wrapper 的浅紫色背景与圆角阴影完整包裹全部卡片，符合“一个接一个”的垂直布局需求。
立即学习“前端免费学习笔记（深入）”；
小结：Flexbox 是现代布局的核心工具，掌握 flex-direction、justify-content 和 align-items 三大属性，就能灵活控制系统级排列逻辑——无需浮动、无需表格，语义清晰且响应友好。
