Flexbox 容器与项目

Flexbox 解决一维空间中的排列：容器沿主轴放置项目，并沿交叉轴处理对齐。先决定主轴方向，再理解项目的基准尺寸、伸缩和换行，才能解释为什么一个项目没有按预期缩小。

.toolbar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
}

flex-basis 是项目参与计算的初始尺寸，flex-grow 分配剩余空间，flex-shrink 处理空间不足。项目的 min-width: auto、内容最小尺寸和不可断开的文字可能阻止它缩小；遇到溢出时要先检查这些约束。

实验与练习

创建一个工具栏，逐一改变 flex-direction、flex-wrap、flex-basis 和 flex-shrink。在窄视口下记录项目是换行、缩小还是溢出，并用 Computed 面板解释结果。

可运行微实验：计算主轴剩余空间

将以下文件保存为 flex.html：

<div class="toolbar"><span>A</span><span class="wide">不可断开的长文本</span><span>C</span></div>
<style>
.toolbar { display: flex; width: 320px; gap: 8px; border: 1px solid; }
.toolbar span { flex: 1 1 120px; background: #def; }
.wide { min-width: 0; }
</style>

先保留 min-width: 0，再删除它。记录第二项是否允许缩小、是否溢出，以及三项的实际宽度。把 flex-basis 改成 0，说明分配剩余空间时初始尺寸从哪里改变；把 flex-wrap 改成 wrap，比较换行与缩小是两种不同结果。

常见错误

• 用 Flexbox 同时解决二维网格和复杂行列定位。
• 只设置 flex: 1，不理解基准尺寸和最小尺寸。
• 以为 gap 会替代所有外部间距语义。

继续阅读

下一篇处理主轴和交叉轴上的对齐：Flexbox 对齐与间距。

练习

1. 用最小输入复现“Flexbox 容器与项目”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案