流式布局

流式布局让内容在可用空间内自然伸缩，同时用 max-inline-size、网格最小值和间距约束可读性。它解决连续尺寸变化，媒体查询解决结构变化；两者通常需要组合，而不是互相替代。

.reading-layout {
  inline-size: min(100% - 2rem, 72rem);
  margin-inline: auto;
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(.75rem, 2vw, 1.5rem);
}

min()、max() 和 clamp() 把上限、下限和首选值放在同一条声明里。流式布局仍需处理长单词、超宽表格、图片比例和滚动容器；“没有媒体查询”不代表“自动适配所有内容”。

实验与练习

建立阅读容器和卡片网格，连续拖动视口宽度，记录列数、卡片最小宽度和文字行长。加入一段不可断开的字符串和一个宽表格，分别设计断行、滚动或缩放策略。

可运行微实验：主题闭环

拖动视口宽度，记录 auto-fit/minmax 的列数和卡片最小宽度；加入不可断长字符串与宽表格，分别验证 overflow-wrap 和内部滚动策略。

常见错误

• 只设置 width: 100%，不设置最大阅读宽度。
• minmax() 的最小值大于容器，制造不可避免的溢出。
• 把所有结构变化都压进一条超长 clamp()。

继续阅读

布局流动后，下一篇处理图片资源如何跟随容器变化：响应式图片。

练习

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

查看本节答案