本文详解如何通过正确应用 css flexbox，解决 django 模板中动态生成的血型卡片在桌面端无法横向排列的问题，重点修正容器布局逻辑与 dom 结构冗余问题。
在构建管理后台仪表盘时，常需以网格化方式展示关键指标卡片（如血型库存统计）。但开发者常陷入一个典型误区：误将卡片容器（.ag-courses_box）重复嵌套在循环内，同时忽略父级容器的布局声明——这正是本例中卡片垂直堆叠、无法横排的根本原因。
观察原代码可发现两个关键问题：
- DOM 结构错误：JavaScript 中每次循环都创建了新的 .ag-courses_box 容器，并将其追加到 .ag-format-container 中，导致页面中出现 8 个独立的 flex 容器，每个容器内仅含 1 张卡片。而 Flex 布局要求多个子项（卡片）必须位于同一父容器下才能实现横向排列；
- 父容器缺失布局声明：.ag-format-container 仅设定了宽度和居中，但未声明 display: flex 或 flex-wrap，无法作为 Flex 容器协调子项。
✅ 正确解法分三步：
1. 修正 HTML 结构：单容器 + 多子项
移除循环内重复创建 .ag-courses_box 的逻辑，确保所有卡片统一追加至 同一个 .ag-courses_box 容器中：
<div class="ag-format-container"> <div class="ag-courses_box" id="coursesBox"></div> <!-- 单一容器 --> </div>
2. 补全 CSS：为容器启用 Flex 布局
在
.ag-courses_box {
display: flex; /* ✅ 关键：启用 Flex 布局 */
flex-wrap: wrap; /* 允许换行（响应式必需） */
gap: 30px; /* 替代 margin，更可控的间距 */
padding: 50px 0;
}
? 提示：gap 是现代 CSS 推荐的间距方案，比依赖 margin 更简洁且避免外边距塌陷问题。
3. 优化 JavaScript：只创建卡片项，不创建容器
重写脚本逻辑，仅动态生成 .ag-courses_item 并追加至唯一容器：
const bloodTypes = [
{ type: "A+", unit: "{{A1.unit}}", color: "#3ecd5e" },
// ...其余7项
];
const coursesBox = document.getElementById("coursesBox"); // ✅ 获取单一容器
bloodTypes.forEach(bloodType => {
const item = document.createElement("div");
item.classList.add("ag-courses_item");
const link = document.createElement("a");
link.classList.add("ag-courses-item_link");
link.href = "#";
const bg = document.createElement("div");
bg.classList.add("ag-courses-item_bg");
bg.style.backgroundColor = bloodType.color;
const title = document.createElement("div");
title.classList.add("ag-courses-item_title");
title.textContent = bloodType.type;
const dateBox = document.createElement("div");
dateBox.classList.add("ag-courses-item_date-box");
dateBox.innerHTML = `Start: <span class="ag-courses-item_date">${bloodType.unit}</span>`;
link.append(bg, title, dateBox);
item.appendChild(link);
coursesBox.appendChild(item); // ✅ 追加到统一容器
});
⚠️ 注意事项
- 不要在循环中新建 .ag-courses_box：否则每个卡片独占一个 flex 容器，flex-direction: row 失去意义；
- 移除冗余的 !important：flex-direction: row!important 在结构错误时无效，且阻碍调试；
- 响应式兼容性：现有媒体查询已适配 767px 和 639px 断点，确保 .ag-courses_item 的 flex-basis 在小屏下自动调整为 100%，无需额外修改；
- Django 模板安全：{{A1.unit}} 等变量需确保后端已传入上下文，建议增加空值判断（如 {{ A1.unit|default:'0' }}）。
总结
卡片横排失效的本质是 “容器错位”而非“样式缺失”。只需三处关键修正：① HTML 中定义唯一 .ag-courses_box 容器；② CSS 中为其添加 display: flex 与 gap；③ JS 中所有卡片追加至该容器。此举不仅解决当前问题，更符合语义化与可维护性原则，是构建响应式仪表盘的基础实践。
