Flexbox 布局实战：主轴、弹性尺寸与移动端溢出

Flexbox 是一维布局模型：一次沿主轴排列项目，再沿垂直的交叉轴对齐。它适合导航、工具栏、表单行、卡片内部和等高列；如果需求同时约束行和列，优先考虑 CSS Grid。不要把 Flexbox 理解成“自动把元素平均分开”的快捷语法。

先建立轴线模型

容器设置 display: flex 或 inline-flex 后，直接子元素成为 flex items。主轴由 flex-direction 决定：row/row-reverse 沿行内方向，column/column-reverse 沿块方向。具体左右上下还会受书写模式和方向影响，因此布局代码尽量使用逻辑方向，不要依赖“主轴永远是水平从左到右”。

justify-content 在主轴分配项目之间的空间；align-items 控制单行项目在交叉轴的位置；align-content 处理多行 flex lines 之间的分布。最后一个属性在没有多行时通常看不出效果。gap 表示项目间距，不会像对每个子元素加 margin 那样在容器边缘制造额外空白。

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.toolbar__actions {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 0.5rem;
}

默认 flex-wrap: nowrap 会让项目留在一行，必要时压缩甚至溢出。需要窄屏换行时显式设置 wrap，再检查视觉顺序与 DOM/键盘顺序一致。row-reverse 和 order 只改变视觉排列，不会重排源代码或读屏/Tab 顺序；不应借此修补错误的 HTML 顺序。

grow、shrink、basis 怎么配合

flex-basis 是分配多余或不足空间前的主轴基准尺寸；flex-grow 表示如何分配正剩余空间，flex-shrink 表示空间不足时如何收缩。实际尺寸还要考虑最小/最大尺寸、内容内在宽度和其他项目，不是简单把容器宽度按 grow 数值切等份。

常见简写：

• flex: initial 等价于 0 1 auto：按内容/尺寸起步，不主动增长，可以收缩。
• flex: auto 等价于 1 1 auto：从基准尺寸起步，能增长也能收缩。
• flex: none 等价于 0 0 auto：不增长、不收缩。
• flex: 1 表示可参与增长并以零基准分配空间；多个项目还会受最小内容尺寸限制。

设定 flex-basis 后，水平主轴项目的 basis 会比同一项目的 width 更优先。百分比基于 flex container 的内容盒主轴尺寸；容器尺寸不确定时，百分比可能按内容尺寸解析。遇到空间计算问题，应在 DevTools 看最终 used size，而不是把缩写按字面猜。

长内容溢出的常见修法

flex item 默认的自动最小尺寸可能受 min-content 影响，例如一段很长的 URL 或不可换行标签阻止项目继续收缩。需要允许内部内容在容器内缩小时，给对应项目设置 min-width: 0，或使用逻辑属性 min-inline-size: 0；再对代码、图片、表格等内容单独决定换行或滚动策略。不要对整个页面加 overflow: hidden 来掩盖布局错误。

.layout {
  display: flex;
  gap: 1rem;
}

.layout__main {
  flex: 1 1 20rem;
  min-inline-size: 0;
}

.layout__aside {
  flex: 0 1 16rem;
}

.layout__main pre {
  max-inline-size: 100%;
  overflow: auto;
}

排查步骤

1. 在 DevTools 勾选 flex overlay，确认容器、主轴、换行和项目边界。
2. 比较每个项目的 flex-basis、grow/shrink、min/max 尺寸与实际内容长度。
3. 用真实中文、长 URL、按钮文案、图片和动态错误提示检查小视口。
4. 确认视觉顺序、DOM 顺序、读屏顺序和键盘焦点顺序一致。
5. 对齐问题先判断发生在主轴还是交叉轴，再分别检查 justify/align 属性。

参考：MDN Flexbox、Flexbox 基本概念、主轴弹性尺寸、flex-basis、flex。