两栏、三栏自适应怎么做？

两栏一侧固定、另一侧占满剩余空间，用 flex：固定项 flex: none，自适应项 flex: 1; min-width: 0。三栏中间自适应同样处理，两边 flex: none。

原理

.layout {
  display: flex;
}
.side {
  flex: none;
  width: 200px;
}
.main {
  flex: 1;
  min-width: 0;
}

min-width: 0 是为了让内容可以被压缩，否则长单词会把自适应栏撑破。

Grid 适合明确的列：grid-template-columns: 200px 1fr 200px。中间那列用 minmax(0, 1fr)，避免最小内容宽度撑开网格。

经典的浮动和 calc 也能做。浮动方案要处理清除浮动，现在只在维护旧页面时需要讲。圣杯和双飞翼是为了让中间栏的 HTML 放在两边之前，同时中间自适应。flex 的 order 可以调整视觉顺序，但 DOM 顺序仍要符合阅读和焦点顺序。

追问

一边固定一边自适应，还要在窄屏叠起来？

容器用 flex-wrap，或者直接用媒体查询把 flex-direction 改成 column。更稳的是 grid 的 auto-fit 和 minmax，让列数随宽度变化。见 响应式。

中间栏要先渲染怎么办？

HTML 里把主内容放前面，视觉上用 grid 的列位置或 flex 的 order 把侧栏放到左边。不要为了视觉去把主内容挪到 DOM 末尾。

易错点

• 自适应项忘了 min-width: 0，布局在长内容下溢出。
• 固定宽度写在 flex: 1 的项上，又抱怨它不固定。固定项用 flex: none。
• 浮动两栏没有给旁边的栏留出边距或 BFC，文字会钻进浮动下面。

相关

• Flex
• Grid
• BFC