Flex 布局的核心概念是什么？

简化版

Flex 是一维弹性布局模型，主要解决一行或一列里的对齐、分配剩余空间和自适应伸缩问题。核心是主轴、交叉轴、容器属性和项目属性。

详细版

给父元素设置 display: flex 后，它成为 flex container，子元素成为 flex item。

常见容器属性：

flex-direction：决定主轴方向，默认 row。
justify-content：控制主轴上的分布。
align-items：控制交叉轴上的对齐。
flex-wrap：是否换行。
gap：项目间距。

常见项目属性：

flex-grow：有剩余空间时放大比例。
flex-shrink：空间不足时缩小比例。
flex-basis：分配空间前的基础尺寸。
flex：前三者简写，常见 flex: 1。
align-self：单个项目覆盖交叉轴对齐。

面试里要强调：Flex 适合一维布局，Grid 更适合二维布局；justify-content 不永远是“水平对齐”，它跟主轴方向有关。

完整版教学

一、先理解主轴和交叉轴

Flex 不是固定按水平、垂直来理解，而是按主轴和交叉轴理解。默认 flex-direction: row 时，主轴是水平方向，交叉轴是垂直方向；如果改成 column，主轴就变成垂直方向。

所以：

.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

这里 justify-content 控制的是垂直方向居中，而不是水平居中。这是很多面试追问的坑。

二、剩余空间如何分配

Flex 布局会先确定每个项目的基础尺寸，再看容器里有没有剩余空间。

如果有剩余空间，按 flex-grow 分配；如果空间不够，按 flex-shrink 收缩。flex-basis 决定分配前项目的基准大小。

flex: 1 通常等价于允许项目一起瓜分剩余空间。多个子项都写 flex: 1，它们会尽量平分可用空间。

.item {
  flex: 1;
}

三、为什么 flex 子项有时不会缩小

一个常见工程问题是：flex 子项内容太长，把容器撑开。原因是 flex item 默认 min-width: auto，它会尊重内容的最小宽度。

解决方式经常是给子项加：

.item {
  min-width: 0;
}

然后配合文本省略：

.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

这个细节很实战，也很容易区分是否真的用过 Flex。

四、Flex 和 Grid 的边界

Flex 是一维模型，适合导航栏、按钮组、左右结构、垂直居中、卡片内部排列。Grid 是二维模型，适合页面整体网格、复杂卡片矩阵、同时控制行和列。

如果你只关心一条轴上的排列，用 Flex 简单；如果你同时关心行列关系，用 Grid 更稳。

五、面试追问与工程落地

Flex 高频追问是 flex: 1 到底代表什么。多数浏览器里它会被展开为类似 flex: 1 1 0%，含义是允许放大、允许缩小，基础尺寸按 0 参与分配。因此多个子项都写 flex: 1 时，更像是在平分剩余空间，而不是按内容宽度再分。

另一个实战坑是文本省略失效。Flex 子项默认最小宽度可能由内容决定，长文本会把布局撑开。很多时候不是 text-overflow 写错，而是父级 flex item 没有 min-width: 0。这个点在后台系统、卡片标题、表格自适应里非常常见。

还可以补一句 Flex 的可访问性边界：order 能改变视觉顺序，但不一定改变 DOM 顺序和键盘/读屏顺序。不要为了视觉排序随意打乱重要内容的 DOM 逻辑，尤其是表单、导航和移动端适配。

六、用数字推演 grow 与 shrink

设主轴可用宽度为 600px，三个项目的 flex-basis 都是 100px，gap 忽略不计，则正剩余空间为 600 - 300 = 300px。若 grow 分别是 1、2、1，总因子为 4，三项分别增加 75px、150px、75px，最终主尺寸为 175px、250px、175px。

空间不足时不能只按 flex-shrink 裸值分。若容器宽 300px，两个项目的 basis 为 200px 与 300px，shrink 都是 1，负剩余空间为 -200px；收缩权重还要乘各自 flex base size，因此两项约收缩 80px 与 120px，得到 120px 与 180px，再接受 min/max 尺寸钳制。

简写	常见展开语义	适用判断
`flex: initial`	`0 1 auto`	不主动吃剩余空间，但允许收缩
`flex: auto`	`1 1 auto`	以自身基础尺寸为起点再伸缩
`flex: none`	`0 0 auto`	不伸不缩，可能溢出
`flex: 1`	常见计算值为 `1 1 0%`	忽略内容基础差异，按因子分空间

Flex 最终尺寸还会经过自动最小尺寸与 min/max 约束，手算 grow 或 shrink 只是算法中间阶段；这正是长文本可能阻止项目继续收缩的原因。

七、常见误区与追问

误区：justify-content 永远表示水平对齐。 它沿主轴分配剩余空间，主轴方向由 flex-direction 决定。
误区：flex: 1 等于 width: 100%。 它是 grow、shrink、basis 的简写，表达弹性分配，不是给每项声明整个容器宽度。
误区：空间不足时只按 flex-shrink 数字直接平均减宽。 收缩权重还与 flex base size 相乘，并受项目最小尺寸约束。
追问：为什么 text-overflow: ellipsis 在 Flex 中常失效？ 承载文本的 flex item 可能保留 min-width: auto 的内容最小宽度，需要在正确层级允许 min-width: 0。
追问：flex-basis: auto 与 0 有什么差别？ auto 通常参考主尺寸属性或内容，0 则让空间分配更少受内容基础尺寸影响。
追问：多行 Flex 的 align-items 和 align-content 分别管什么？ 前者对齐每条 flex line 内的项目，后者在交叉轴有剩余空间且存在多条线时分配各行整体。
追问：能否用 order 修复 DOM 顺序？ 不能，它主要改变视觉呈现顺序，阅读、焦点等顺序可能仍基于 DOM，应先保证文档顺序合理。

八、加强记忆

Flex 的核心别背属性列表，要抓住“主轴分配，交叉轴对齐”。justify-content 管主轴，align-items 管交叉轴，flex-grow/shrink/basis 管项目怎样吃掉或让出空间。

简化版

详细版