本文教你使用 css flexbox 和媒体查询，针对 cargo collective 网站的双列布局（如简历页）实现桌面端紧凑、移动端宽松的响应式列间距控制，无需插件，纯 css 即可生效。
本文教你使用 css flexbox 和媒体查询，针对 cargo collective 网站的双列布局（如简历页）实现桌面端紧凑、移动端宽松的响应式列间距控制，无需插件，纯 css 即可生效。
Cargo Collective 默认的网格系统在桌面端显示良好，但当屏幕变窄（尤其是手机端）时，两列内容常因固定间距或未适配的弹性行为而显得拥挤、重叠甚至错位。根本原因在于：同一套 CSS 规则被同时应用于所有设备，缺乏断点控制。解决思路是——用 display: flex 构建可控容器，结合 flex-wrap 与 flex-basis 实现流式响应，并通过媒体查询（@media）精准干预移动端表现。
以下是一套经验证的、适用于 Cargo Collective 的精简方案（可直接粘贴至「Custom CSS」面板）：
/* 步骤1：为你的双列容器添加语义化类名（推荐在 HTML 模块中手动添加 class="resume-columns"） */
.resume-columns {
display: flex;
flex-wrap: wrap;
gap: 2rem; /* 推荐替代 margin，更可控的列/行间距 */
justify-content: space-between;
}
.resume-columns > * {
flex: 1 1 calc(50% - 1rem); /* 桌面端：两列等宽，预留 gap 空间 */
}
/* 步骤2：移动端断点（≤768px）——改为单列 + 加大垂直间距 */
@media screen and (max-width: 768px) {
.resume-columns {
gap: 2.5rem; /* 移动端增大间距，提升可读性 */
justify-content: center;
}
.resume-columns > * {
flex: 1 1 100%; /* 强制单列铺满 */
margin-bottom: 1.5rem; /* 底部留白，避免紧贴 */
}
}
? 关键说明与注意事项：
- ✅ gap 优于 margin：现代 Flexbox 的 gap 属性能统一控制列间（column-gap）和行间（row-gap）间距，避免 margin 导致的外边距合并问题，且在 Cargo Collective 的内联样式环境中更稳定；
- ✅ flex: 1 1 calc(50% - 1rem) 精确计算桌面宽度（减去一半 gap），确保两列不换行且均匀分布；
- ⚠️ 务必检查 HTML 结构：Cargo Collective 的模块生成器可能包裹额外 。建议在「Page Source」中定位实际内容容器，将 .resume-columns 类添加到最外层父容器上（例如）；
- ? 调试技巧：在浏览器开发者工具中临时启用 outline: 1px solid red 查看元素边界，快速确认目标容器是否选中正确。
最后，保存 CSS 后刷新页面，即可看到桌面端保持双列紧凑布局，而手机端自动切换为单列+宽松垂直间距。此方案兼容所有主流移动设备，且完全基于标准 CSS，未来 Cargo Collective 升级亦无需修改。
