flex布局实现圣杯布局需语义结构优先：主内容置dom首位，侧栏用；容器display:flex，左栏order:1、右栏order:3，主栏flex:0 1 auto且min-width:0；移动端用visibility:hidden+width:0隐藏侧栏或flex-direction:column重排order。

用 Flex 布局构建圣杯布局或左右分栏，核心是语义结构优先、视觉顺序后置，靠 order 和 flex 属性协同实现，不依赖浮动、负边距或绝对定位。

HTML 结构必须语义正确

主内容（<main></main>）要放在 DOM 最前面，这是 SEO、可访问性和屏幕阅读器的基础。侧栏用 <aside></aside> 或带语义类的 <div> 即可： <ul> <li> <code><main></main> 放首位，保障内容优先加载与语义权重

左栏、右栏按需使用 <aside class="sidebar-left"></aside> 等，不强行调整 HTML 顺序

整个布局容器用 <div class="container"> 包裹，避免污染 body 或滥用 header/footer <h3>Flex 容器与三栏基础样式</h3> <p>容器设 <code>display: flex，再通过 order 控制视觉位置，各栏宽度逻辑如下：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• 左栏：width: 200px; order: 1; flex-shrink: 0;（或 flex: 0 0 200px）
• 主栏：flex: 0 1 auto; min-width: 0; —— 关键！不是 flex: 1，否则内容少时塌缩
• 右栏：width: 240px; order: 3; flex-shrink: 0;
• 容器本身不设 justify-content: space-between，避免小屏下横向溢出

移动端适配不能用 display: none

隐藏侧栏时若用 display: none，中间栏会因子项数量变化而无法占满全宽。正确做法是让元素仍参与 Flex 计算：

• 左栏加：visibility: hidden; width: 0; overflow: hidden; flex-basis: 0;
• 右栏同理，或统一用媒体查询切换为单列：flex-direction: column 并重设 order
• 例如在小屏下让主栏排第一：.main { order: 1; }，左栏 order: 2，右栏 order: 3

容易被忽略的父级约束问题

即使 CSS 写对，如果外层有这些设置，Flex 主轴计算就会失效：

• 祖先元素设了 max-width 且未配合 width: 100%
• 父容器用了 transform 或 overflow: hidden，截断 flex 主轴伸展
• min-width: 0 必须加在主栏上，防止内部 inline 元素撑宽导致溢出