Flexbox双栏布局必须设display:flex，否则flex相关属性失效；常见错误是遗漏父容器声明，导致右栏不撑满、文字左挤、高度塌陷；Grid更适合复杂对齐与内容驱动分配。
Flexbox 双栏布局必须设 display: flex
不写 display: flex，父容器就只是普通块级元素，flex: 1 或 align-items 全部失效。常见错误是只给子元素加 flex 相关样式，忘了“弹性”必须由父容器开启。
实际调试中，最常卡在：右栏没撑满、文字靠左挤成一团、高度塌陷——八成是因为漏了这行 CSS。
- 父容器必须显式声明
display: flex，不能依赖继承或默认值 - 若需垂直居中内容，加
align-items: center；若需顶部对齐，用align-items: flex-start - IE10 及以下需加
display: -ms-flexbox前缀，但仅限真实兼容需求，别为“以防万一”加
左固定+右自适应时 width 和 margin 别混用
浮动方案里有人写 .left { float: left; width: 200px } + .right { margin-left: 200px }，看似合理，但一旦右栏内容少、高度不够，左栏会“穿出”底部，盖住后续区块——这是文档流断裂的典型表现。
更稳的做法是让右栏自己“感知”左栏宽度，而不是靠硬编码 margin。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 推荐用
overflow: hidden触发 BFC，右栏自动避开浮动元素，无需写margin-left - 如果用 Flex，直接
.left { width: 200px }+.right { flex: 1 }，语义清晰、无塌陷风险 - 绝对定位方案（
position: absolute）会让元素脱离文档流，后续内容会往上顶，除非你明确需要这种行为
响应式断点要覆盖 viewport 宽度，不是容器宽度
很多人写媒体查询用 @media (max-width: 768px)，结果小屏下双栏还是横排——因为这个 768px 是视口宽度，但页面外层可能有 max-width: 1200px 的限制，视觉上根本达不到断点条件。
真正该监听的是用户看到的屏幕宽度，不是某个 div 的渲染宽度。
- 断点值应基于设计稿的移动设备尺寸（如 480px、768px、1024px），而非容器类名里的数字
- 用
flex-direction: column切换单列，比改float或display更可靠 - 避免在媒体查询里重复写整套布局逻辑，优先复用主样式，只覆盖关键属性（如
flex-direction、width）
Grid 双栏更适合复杂对齐与内容驱动分配
当你要让左栏文字垂直居中、右栏图片等比例缩放且不裁剪，或者上下两区域按内容自动分高（比如聊天窗口里消息区和输入框），Flexbox 就开始吃力了。这时候 Grid 不是“更高级”，而是更贴合问题本质。
Grid 的行列定义天然解耦，不需要靠 margin、padding 或 JS 算高度。
- 双栏横向布局：用
grid-template-columns: 200px 1fr，比flex更直观控制比例 - 图文垂直居中：配合
place-items: center，一行代码搞定，不用嵌套display: flex容器 - 内容驱动高度分配（如面板上下两区）：不设
grid-template-rows，让 Grid 自动按内容伸缩，再用overflow: auto控制溢出
