Flexbox双栏最简实现：父容器设display: flex，左栏固定宽240px，右栏flex: 1自适应；响应式下@media(max-width:768px)改flex-direction:column并用order:-1调序；间隙统一用gap而非margin。
用 Flexbox 实现最简双栏，别碰 float 和 inline-block
Flexbox 是目前最可靠、最易维护的双栏方案，float 已过时，inline-block 有空白符干扰，都不该作为首选。
核心就两步：给容器加 display: flex，再控制子元素宽度。不需要额外 wrapper，也不依赖 JavaScript。
- 父容器设
display: flex，默认横向排列，无需写flex-direction: row - 左侧导航栏建议固定宽度（如
240px），右侧主内容区用flex: 1自适应剩余空间 - 加
min-height: 100vh防止内容少时高度塌陷 - 避免在子元素上同时设
width和flex，会冲突；想固定宽就只设width，想弹性伸缩就用flex
响应式断点下如何让双栏变单栏？
移动端必须收为单栏，否则导航被挤碎、文字折行混乱。关键不是“隐藏左边”，而是“重排布局流”。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用
@media (max-width: 768px)触发切换，768px 是常见平板临界值 - 在媒体查询内把父容器
flex-direction改成column，左右自然上下堆叠 - 左侧导航可加
order: -1让它出现在顶部（否则默认在上，内容在下） - 不要用
display: none隐藏导航——那样会丢失语义和可访问性，改用height: auto+overflow: hidden配合动画更稳妥
为什么用 gap 而不是 margin 控制栏间距？
gap 是 Flexbox 和 Grid 原生支持的间隙属性，专为容器内子项设计；margin 属于单个元素，容易引发外边距合并、方向歧义等问题。
- 在父容器上设
gap: 16px，左右栏之间自动留白，且不污染子元素样式 -
gap在响应式中表现稳定，margin在flex-direction: column下需手动调整 top/bottom，易漏 - 旧版 Safari（gap，如需兼容可回退到
padding+box-sizing: border-box组合
双栏内容高度不一致时，怎么让右侧撑满视口？
常见现象：左侧导航很长，右侧内容很短，结果右侧底部悬空，背景色/边框断层。这不是“右侧没高度”，而是默认未拉伸。
- 给父容器加
align-items: stretch（Flex 默认值，通常不用显式写） - 确保右侧区域没设
height或max-height硬限制 - 若右侧含绝对定位元素，需额外设
position: relative防止脱离文档流导致高度计算失效 - 慎用
min-height: 100%—— 它依赖父级有明确高度，不如直接用min-height: 100vh更直接
实际开发中最容易被忽略的，是双栏在打印样式（@media print）下的表现。多数人只测屏幕，但一旦用户 Ctrl+P，双栏常错位或内容截断。如果项目需支持打印导出，务必单独测试并用 flex-direction: column + width: 100% 强制回归单列流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
