双栏布局在移动端不堆叠的根本原因是flex容器未启用flex-wrap: wrap且子项未释放主轴空间；应保持flex-direction: row，用flex-wrap: wrap配合width控制换行，避免flex: 1和min-width干扰，并确保box-sizing: border-box与可访问性。
双栏布局在移动端不堆叠，本质不是“没写媒体查询”，而是 flex 容器没启用换行 + 子项没释放主轴空间。
flex-direction: column 不是唯一解法
很多人一想到移动端堆叠，就直接写 flex-direction: column。这确实能垂直排列，但会强制所有子项上下排列，失去对齐控制权，且在某些嵌套结构中反而引发交叉轴溢出。更稳妥的做法是保持 flex-direction: row（默认），只让容器「允许换行」：flex-wrap: wrap。
关键点：
- 必须给容器加
flex-wrap: wrap，否则即使子项设了width: 100%，也会被压缩在一行里（nowrap是默认值） - 子项不能用
flex: 1或flex-grow: 1—— 它们会抢占剩余空间，阻止换行 - 推荐用固定宽度（如
width: 48%桌面端）+ 媒体查询内改为width: 100%，比依赖flex-basis更可控
@media 中 width: 100% 为什么有时仍不堆叠？
常见现象：写了 @media (max-width: 768px) { .col { width: 100%; } }，但两栏还是挤在同一行，甚至出现横向滚动条。根本原因通常是：
-
box-sizing是默认的content-box，而padding或border会让实际宽度 > 100% - 父容器没设
display: flex，或设了但被其他样式（如float、position: absolute）覆盖 - 子项有
min-width（比如图片、input元素自带最小宽度），压过了width: 100%
解决办法：在移动端规则里统一加 box-sizing: border-box，并检查是否有未重置的 min-width。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
避免 display: none 导致内容不可访问
有些开发者为“简化移动端布局”，直接在媒体查询里写 .footer-main { display: none; }，再另起一套 DOM 结构。这会导致：
- 屏幕阅读器读不到隐藏内容，违反 WCAG 可访问性要求
- 搜索引擎可能降权，语义化信息丢失
- 维护成本翻倍：两套 HTML，改一处漏一处
正确做法是保留原有结构，只调样式：flex-wrap: wrap + width: 95%（留出安全边距）+ margin: 0 auto 居中，既堆叠又保语义。
真正卡住人的，往往不是“怎么写”，而是“为什么写了还不生效”——多数时候是 flex-wrap 没开，或子项的 flex-shrink 在偷偷抵抗宽度收缩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
