写了 display:flex，为什么三栏布局还没完成？

一个三栏页面已经有左栏、主内容和右栏，也设置了 display: flex，但这只能让三个子元素进入 Flex 布局，并不能自动实现"左右固定、中间自适应"。更容易混淆的是，有些笔记还会把 Flex、Grid 都称作 BFC。本文从这个未完成示例出发，补齐两种三栏方案，并理清三类格式化上下文。

代码基于现有学习材料静态分析，浏览器运行未验证。

开启 Flex 只完成了第一步

页面结构如下：

html 复制代码

<div class="layout">
  <aside class="sidebar left">左侧栏</aside>
  <main class="main">主内容区域</main>
  <aside class="sidebar right">右侧栏</aside>
</div>

如果 CSS 只有：

css 复制代码

.layout {
  display: flex;
}

它只确定了一件事：三个直接子元素成为 flex items。以下规则仍然未知：

左右栏的固定宽度；
左右栏能否缩小；
中间栏如何取得剩余空间；
长内容超出时如何处理。

因此，display:flex 是布局入口，不是完整答案。

补齐 Flex 三栏

css 复制代码

.layout {
  display: flex;
}

.sidebar {
  flex: 0 0 200px;
}

.main {
  flex: 1;
  min-width: 0;
}

flex: 0 0 200px 表示左右栏不放大、不缩小，并以 200px 为基准宽度。中间栏的 flex: 1 让它吸收剩余空间。

min-width: 0 看起来不起眼，却经常决定布局在长文本下是否稳定。Flex item 的默认最小尺寸可能受内容影响，导致中间栏无法继续缩小。将最小宽度设为 0，才允许它缩到内容固有宽度以下。

这条尺寸关系可以概括为：

text 复制代码

容器宽度
- 左栏固定宽度
- 右栏固定宽度
= 中间栏可用宽度

Grid 对列关系表达得更直接

同一个目标也可以写成：

css 复制代码

.layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 200px;
}

这里直接声明三条列轨道：固定、弹性、固定。

中间列使用 minmax(0, 1fr)，明确允许最小值降到 0，降低内容把轨道撑开的风险。它与 Flex 中的 min-width: 0 处理的是相似边界：弹性区域不能被内容的默认最小尺寸锁死。

三栏主要沿水平方向分配空间，本质上是一维问题，因此 Flex 已经足够。Grid 仍然适合，因为它对"固定列 + 弹性列 + 固定列"的表达非常直接。

选择 Flex 还是 Grid

判断条件	Flex	Grid
主要需求	沿一个方向排列和伸缩	直接定义行列轨道
三栏核心写法	给子项设置 `flex`	给容器声明三列
弹性列防溢出	`min-width: 0`	`minmax(0, 1fr)`
后续扩展二维区域	需要额外处理	更自然

不要把选择题复杂化：只有横向三栏时，两者都合理；若布局天然包含明确的行列关系，Grid 通常更容易读。

BFC 不是 Flex 和 Grid 的统称

BFC 是 Block Formatting Context，即块级格式化上下文。它描述一块区域内部如何按照块级布局规则计算，不等于块级元素本身。

BFC 常用于：

包含内部浮动；
隔离部分外边距折叠；
避免块盒与浮动重叠。

如果只是想明确创建一个 BFC，现代写法是：

css 复制代码

.container {
  display: flow-root;
}

过去常见的 overflow: hidden 也可能创建 BFC，但它同时会裁剪溢出内容，不能忽略这个副作用。

三类格式化上下文应该分开理解

容器设置	建立的上下文	内部布局对象
`display: flow-root`	BFC	块级盒
`display: flex`	Flex Formatting Context	flex items
`display: grid`	Grid Formatting Context	grid items

它们的共同点是为内部布局提供规则，区别是采用的算法不同。

所以，"Flex 和 Grid 开启新的 BFC"并不准确。更好的表述是：Flex 和 Grid 分别建立自己的格式化上下文，而不是让内部元素继续按照传统 BFC 的块级规则排列。

创建 BFC 时，条件不能只背属性名

下面这些说法都不够完整：

"写 float 就创建 BFC"；
"写 position 就创建 BFC"；
"写 overflow 就创建 BFC"。

应该记住条件：

float 不为 none；
position 为 absolute 或 fixed；
块级元素的 overflow 计算值不为 visible 或 clip；
显式使用 display: flow-root；
inline-block 等特定显示类型。

普通的 position: relative 并不创建 BFC，float: none 也不会。

两个常见属性不能解决列宽问题

`justify-content`

它负责分配主轴剩余空间，例如居中、两端对齐或在项目之间放置间隔。它不能代替 flex: 1，因为它没有定义中间栏应该伸展并填满空间。

`align-items`

它负责交叉轴对齐。在默认横向 Flex 中，它主要影响垂直方向，不负责左右三列的宽度。

判断 CSS 属性时，应先确认它作用于主轴、交叉轴，还是项目自身的伸缩尺寸。

"主内容优先"还涉及 DOM 顺序

现有结构是：

text 复制代码

左栏 → 主内容 → 右栏

这意味着 main 并不是源码中的第一个内容区域。如果题目强调主内容源码优先，仅设置 Flex 不会改变这一事实。

可以用 CSS order 改变视觉顺序，但不能只看画面。DOM 顺序还关系到键盘导航、屏幕阅读器和无样式状态下的阅读顺序。合理做法是先确定语义与阅读顺序，再决定是否需要视觉重排。

面试时用"目标---方案---边界"回答

对于"三栏布局怎么实现"，可以这样回答：

目标是左右固定、中间自适应。Flex 方案中，容器设置 display:flex，左右栏设置 flex:0 0 200px，中间栏设置 flex:1，并用 min-width:0 处理长内容下的收缩问题。Grid 方案可以声明 grid-template-columns:200px minmax(0,1fr) 200px。只有横向三栏时两者都适合，Grid 对列关系的表达更直接。

对于"Flex 是否创建 BFC"，可以这样回答：

display:flex 建立 Flex Formatting Context，display:grid 建立 Grid Formatting Context。它们和 BFC 都是格式化上下文，但内部算法不同，不能把 Flex、Grid 简单称为传统 BFC。

交付前的布局自检

左右栏是否明确设置固定宽度和收缩规则？
中间栏是否占据剩余空间？
Flex 中间栏是否需要 min-width: 0？
Grid 弹性列是否使用 minmax(0, 1fr)？
是否误用 justify-content 控制列宽？
是否把 Flex、Grid 与 BFC 混为一谈？
overflow: hidden 是否可能裁剪必要内容？
DOM 顺序是否符合阅读和导航逻辑？

真正可迁移的判断是：先描述列之间的尺寸关系，再选择 Flex 或 Grid；只有遇到块级布局隔离、浮动包含等问题时，再考虑 BFC。