Flex布局实现圣杯布局需语义结构优先：主内容<main>置DOM首位，侧栏用<aside>；容器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>）要放在 DOM 最前面，这是 SEO、可访问性和屏幕阅读器的基础。侧栏用 <aside> 或带语义类的 <div> 即可：
-
<main>放首位，保障内容优先加载与语义权重 - 左栏、右栏按需使用
<aside class="sidebar-left">等，不强行调整 HTML 顺序 - 整个布局容器用
<div class="container">包裹，避免污染 body 或滥用 header/footer
Flex 容器与三栏基础样式
容器设 display: flex，再通过 order 控制视觉位置，各栏宽度逻辑如下：
- 左栏：
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 元素撑宽导致溢出
