最稳妥方案是用display: flex实现双栏布局：侧边栏设flex: 0 0 240px（不伸缩不收缩），主内容区设flex: 1并加min-width: 300px；小屏通过@media (max-width: 600px) { .container { flex-direction: column; } }切换为竖排堆叠，确保语义正确与响应式兼容。
直接用 display: flex 实现最稳妥，主内容区自适应、侧边栏固定宽、小屏自动堆叠，不用处理浮动塌陷或 Grid 兼容性问题。
用 display: flex 做左右双栏（博客主场景）
博客页典型结构是左侧导航/分类/作者信息 + 右侧文章列表或正文，display: flex 天然适配这种主辅关系。
- 父容器必须设
display: flex，漏掉这句整个布局就失效 - 侧边栏建议写成
flex: 0 0 240px（不伸缩、不收缩、固定宽），比只写width: 240px更稳，防内容撑开变形 - 主内容区写
flex: 1，它会吃掉剩余所有空间；如果怕窄屏下太挤，加min-width: 300px - 默认
align-items: stretch让两栏等高，但某些 CSS 重置库会覆盖它，可显式补一句align-items: flex-start避免视觉突兀 - 别在子元素上同时写
width和flex，二者冲突，优先用flex控制分配逻辑
响应式切单栏时只改 flex-direction
小屏下双栏横排毫无意义，必须竖排。关键不是“隐藏一栏”，而是让 DOM 顺序自然堆叠——<main></main> 在前、<aside></aside> 在后，这样屏幕阅读器和 SEO 才能正确识别主次。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 媒体查询里只改一句：
@media (max-width: 600px) { .container { flex-direction: column; } } - 断点别硬套
768px，手机真实 viewport 多在480px–600px，用600px更准 - 竖排后，原水平对齐方式可能失效，比如
align-items: flex-start在 column 下变成控制“横向起点”，需要按需调整为align-items: center或stretch - 侧边栏如果有固定高元素（如头像图），加
max-width: 100%和height: auto保比例，防止撑破容器
为什么别用 float 或 display: table
这两种方案在博客场景下全是负向收益：前者要手动清除塌陷、后者完全无法响应式，且都破坏语义结构。
立即学习“前端免费学习笔记（深入）”；
-
float最常见错误是只给侧边栏float: left，主内容区没处理，结果直接掉到下方；补救用overflow: hidden可能截断阴影或下拉菜单 -
display: table要求 HTML 结构极度严格：外层display: table、中间display: table-row、内层display: table-cell，少一层就塌，移动端根本没法切单列 - 两者都会让屏幕阅读器误读结构——把导航栏当成表格单元格读，影响可访问性
- 现代项目里写这些，基本等于主动放弃维护性和扩展性
grid-template-columns 适合什么博客场景？
如果你的博客页未来可能扩展为三栏（比如加一个右侧广告位）、或需要精确控制列间隙与对齐，display: grid 比 flex 更清晰。
- 写法更直白：
grid-template-columns: 240px 1fr（左栏固定、右栏占剩余）或1fr 3fr（按比例分配） - 列间距统一用
gap: 16px，别用margin，否则响应式时容易错位 - 子元素无需任何浮动、
flex或width，Grid 自动按轨道分配位置 - 注意移除子元素上残留的
float、display: inline-block等干扰样式，它们会和 Grid 冲突 - IE11 不支持 Grid，如果真要兼容，得回退到
flex，而不是硬上table
真正容易被忽略的是语义标签选择：<main></main> 包主内容、<aside></aside> 包侧边栏，而不是一堆 <div class="left"> 和 <code><div class="right"> —— 这不仅影响 SEO 和可访问性，后期加无障碍支持或 SSR 渲染时，会多出好几倍调试成本。</div>
