左右分栏必须用包主内容、包辅助信息（如推荐或作者栏），不可全用或错用；右栏若为广告等无关内容应改用；DOM顺序建议在前、在后以保障小屏可访问性与SEO。
左右分栏用 <main></main> 和 <aside></aside> 是语义前提
没选对标签，后续所有自适应逻辑都容易出偏。浏览器和辅助工具依赖语义判断结构意图：<main></main> 必须包主内容区，<aside></aside> 包辅助信息（如推荐、分类、作者栏），不能全用 <div> 或错用 <code><nav></nav>。如果右栏是广告或无关内容，改用 <section></section> 更准确。
DOM 顺序建议 <main></main> 在前、<aside></aside> 在后，这样小屏堆叠时主内容仍优先读取，不影响 SEO 和可访问性。别用 display: none 隐藏一栏再显示另一栏——内容直接从 DOM 流中消失，搜索引擎和屏幕阅读器就“看不见”了。
flex-direction: column 是响应式切换的核心开关
左右变上下，不是删样式，也不是靠 JS 切 class，就是一句媒体查询改主轴方向：
/* 小屏竖排 */
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}注意断点值别硬写 768px，真实手机 viewport 多在 480px–600px 之间，max-width: 600px 更稳妥。改方向后，原 align-items: flex-start 可能让内容顶部对齐太松散，这时加 align-items: stretch 或 align-items: center 控制竖排对齐方式。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 忘记给
<aside></aside>内的图片加max-width: 100%和height: auto，竖排后撑开页面 - 在子元素上写
width: 100%，干扰 flex 分配逻辑，反而导致溢出或空白 - 用了 CSS 重置库（如 normalize.css），它可能覆盖了默认的
align-items: stretch，导致两栏高度不一致
右栏内容超长时，overflow-wrap 和 word-break 必须配一个
右栏设了 flex: 1 后，宽度由 flex 容器分配，但文字不换行会直接撑破布局。尤其英文长路径、JSON 字段、代码片段等场景，必须显式控制断行行为：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
推荐组合：
-
overflow-wrap: break-word：只在必要时断词（更自然） -
word-break: break-all：强制在任意字符处断（适合纯数据展示） - 两者别同时写，选其一即可；若内容含中文，优先用
overflow-wrap
别指望 white-space: normal 默认生效——某些框架或重置样式会把它改成 nowrap，得主动覆盖。
父容器漏掉 display: flex 是最常被忽略的失效原因
所有 flex 子属性（flex: 0 0 240px、flex: 1、align-items）都依赖父级声明 display: flex。漏掉这句，整个布局就退化成普通块流，左栏被压缩、右栏溢出、高度不对齐等问题全会出现。
另外两个隐蔽但高频的问题：
- 父容器没设
box-sizing: border-box，padding 或 border 让实际宽度超出预期，尤其在固定宽左栏上表现明显 - 左栏写了
width: 240px却没加flex-shrink: 0，内容多时被 flex 压缩变形；应统一用flex: 0 0 240px
复杂点在于：flex 自适应本质是“剩余空间分配”，不是“减法计算”。一旦某个子项有固定高、浮动残留、或意外 position: absolute，都会破坏这个平衡。检查时优先看父容器 display 声明和子项是否干净。
