F2.11.1fluid layout interpolates with width设计
流式随宽度连续变化
别名: 流式布局 · fluid layout · 百分比列
概念解释
窗口宽加 1 px，列宽、图、空白也加一点点——没有啪的一声换成另一套结构。这是流式（fluid）：百分比、flex、min/max、clamp，布局在宽度上连续插值。三列图库在 700 px 每列约 200，到 1100 每列约 330，图变得稀疏巨大，中间没有任何断点被触发。
自适应是在断点处换盒子树。两者可以合用，但流式自己的病是：从未被设计过的中间态也会被拿去用。
机制
列被写成可用空间的分数。宽度一变，分数跟着变，行长、图尺寸、剩余空一起走。好处是每个宽度都是一等公民，不必只照顾两个设计稿。坏处是分数没有审美：2.4 张卡加一条细缝、正文被拉到九十字符、英雄图把字压成细条，都会被流畅地做出来。
流式不管「该在哪一宽度改成两列」，它只负责这一套结构如何伸缩。改结构是跳变的工作。
边界
文字行长有舒适区间，超过就要换结构或加 max-width，纯流式会把文章拉成一条。固定像素的控件（部分原生选择器、广告）不参与插值，会在流式背景上戳出硬块。打印页、像素风游戏也不走分数。
极窄宽度上分数列会低于内容最小宽，触发横向溢出——流式需要地板，不是无限可除。
怎么落地
- 给流式模块加上地板和天花板（min-width、max-width、clamp），把行长和卡宽锁在可接受带里。
- 承认「只流不跳」会在某宽度变丑，预先找那个宽度，要么加天花板，要么交给跳变。
- 验证：缓慢拖窗口，确认没有突然换列、导航没有突然变成汉堡——那才叫流式。然后在三个从未出过设计稿的宽度停下，量行长、看有没有细缝和被拉爆的图。任一处不可读或出现半个对象，给这里加限制，而不是加一个新的视口断点凑数。