请说明采用 CSS Flexbox 或 Grid 两种方案分别怎样打造一个三栏布局，且要求左、右两栏宽度不变，中间栏自动填充剩余空间？
考察说明
考查对 Flexbox 与 Grid 基本布局能力的理解，以及能否在固定宽度与自适应场景下选择合适方案。
回答思路
- 【回答框架 1】Flexbox 方案：父容器设为 display:flex，左右栏各设置固定宽度（如 width:200px），中间栏设置 flex:1，使其占据剩余空间。注意主轴方向默认水平，三栏顺序由 HTML 结构决定，可用 order 属性调整不改变 DOM 顺序。
- 【回答框架 2】Grid 方案：父容器设 display:grid，定义 grid-template-columns: 200px 1fr 200px，即可实现左右固定、中间自适应。Grid 更擅长二维布局，三栏只是其一行的情况，代码简洁且易扩展。
- 【回答框架 3】两种方案对比：Flexbox 内容驱动，适用于一维分布，中间栏使用 flex-grow 可细调比例；Grid 容器驱动，适合整体网格结构，若要控制间隙可用 gap 属性，Flexbox 部分版本需 margin 处理。
- 【回答框架 4】实际开发建议：若只做三栏且无复杂对齐，二者皆可，但 Grid 声明更直观；若需要垂直居中、侧栏宽度变化等，Flexbox 更灵活。最终根据项目浏览器兼容性选择，现代浏览器均良好支持 Flexbox 与 Grid。
- 【关键点 1】Flexbox 使用 flex:1 使中间栏自适应，左右栏固定 width。
- 【关键点 2】Grid 使用 grid-template-columns: 固定宽 1fr 固定宽 实现三栏。
- 【关键点 3】Grid 适合二维布局，Flexbox 适合一维排列，三栏场景二者都能用。
- 【关键点 4】注意默认主轴方向，Flexbox 如需垂直排列需 flex-direction:column。
- 【易错点 1】若未设置容器宽度或父级无宽高，flex 自适应可能失效。
- 【易错点 2】Grid 中 1fr 和 auto 的区别：auto 由内容撑开，可能超出预期，应明确使用固定宽度或 1fr。
- 【易错点 3】旧浏览器对 Grid 部分属性支持不佳，需检查兼容性或提供回退方案。