05 · Flexbox、伸缩与自动最小尺寸

根据主轴和交叉轴安排布局，解释 flex 三个值，并处理长内容导致的布局撑开。

学习前提

理解盒模型、类选择器和内容驱动的尺寸。

本课完成后你能做什么

根据主轴和交叉轴安排布局，解释 flex 三个值，并处理长内容导致的布局撑开。

先理解机制

Flexbox 沿一条主轴分配空间，交叉轴负责另一方向的对齐。row 时主轴通常为横向，但写作模式和方向都会影响直观方向，不能把 justify-content 永远理解成水平对齐。容器决定排列方式，子项决定如何分配可用空间；先画清楚容器和直接子项的关系再写规则。

flex:1 1 180px 对应增长系数、收缩系数和基础尺寸。基础尺寸不是最终宽度：还要考虑可用空间、间隙和最小尺寸。flex 子项默认的自动最小尺寸可能阻止长内容继续缩小，这时 min-width:0 是常见修复之一；如果内容本身不可折行，还需要决定换行还是独立滚动。

可运行示例

<style>
  .row { display: flex; gap: 16px; flex-wrap: wrap; }
  .item { flex: 1 1 180px; padding: 24px; background: #edf6ee; }
</style>
<div class="row">
  <div class="item">HTML</div>
  <div class="item">CSS</div>
  <div class="item">JavaScript</div>
</div>

推演与验证

在完整文档中放入示例，逐步缩小窗口，观察卡片何时换行。关闭 flex-wrap，比较内容变窄与换行的区别。再把其中一张卡片的文字替换成很长的网址，检查它是否影响整排；添加 min-width:0 和 overflow-wrap 后，确认修复针对内容约束而不是偶然改变容器宽度。

常见错误与边界

align-items:center 不会自动把容器放在页面中间；它只影响容器内部的交叉轴对齐。flex:1 不是“绝对等宽”的通用承诺，内容最小尺寸仍可能干预。不要用 order 改变关键阅读流程，源码和键盘顺序可能仍与视觉顺序不同。

动手练习

实现一个左边可伸缩标题、右边固定按钮的工具栏。标题很长时允许换行，但按钮保持完整可见。

参考解法与理由

标题使用 flex:1 和 min-width:0，按钮使用 flex:none。这里希望按钮保持可用，因此空间不足应优先由标题折行承担，而不是把按钮文字压碎。极窄屏可让整个工具栏换行。

<style>.toolbar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.toolbar h2{flex:1;min-width:0;overflow-wrap:anywhere}.toolbar button{flex:none}</style>
<div class="toolbar"><h2>A long learning-library title</h2><button type="button">Save</button></div>

深入实验：为什么flex:1仍会撑破容器

假设侧栏占固定宽度，正文含一个长标识符。flex-grow负责分配空间，不保证内容可以无限缩小。下面把问题压缩成一个320px容器，先观察失败，再加最小修复。

<!doctype html><html lang="en"><meta charset="utf-8">
<title>Flex sizing lab</title>
<style>
* { box-sizing: border-box; }
.row { display: flex; width: 320px; max-width: 100%; border: 1px solid; }
.side { flex: 0 0 90px; }
.main { flex: 1; }
.fixed .main { min-width: 0; overflow-wrap: anywhere; }
</style>
<div class="row"><div class="side">Menu</div><div class="main">verylongunbrokenidentifier012345678901234567890123456789</div></div>
<script>
const row = document.querySelector('.row');
console.log('before', row.scrollWidth > row.clientWidth);
row.classList.add('fixed');
console.log('after', row.scrollWidth > row.clientWidth);
</script></html>

预期观察

一般浏览器默认字体下，before为true，after为false。DevTools里可关闭.fixed规则再次观察。页面窄于320px时容器仍不应越出视口。

原因、取舍与适用边界

正文flex项的自动最小宽度可能由不可断内容决定。min-width:0允许它缩小，overflow-wrap:anywhere提供文本换行机会，两者解决的是不同层面。只加overflow:hidden虽然可能消除滚动条，却会裁掉真实内容。若内容是必须保留原行的源码，应该在代码块内部提供横向滚动，而不是强迫源码任意断行。

进阶练习

把正文换成一张800px宽的图片，原修复还够吗？

解法与推理

文本换行规则不约束图片的固有尺寸。给正文图片设置max-width:100%;height:auto，并再次测量容器。保留min-width:0，避免把图片缩放和flex项收缩误认为同一件事。

进一步阅读

MDN · min-width