minmax() 不能直接写成 minmax(100px, 1fr) 因为最大值参数不支持混合单位，旧版 Safari 会失效；正确用法需结合上下文，Grid 中可直接使用（现代浏览器），Flex 中完全无效。
minmax() 为什么不能直接写成 minmax(100px, 1fr)
因为 1fr 是一个弹性单位，而 minmax() 的最大值参数不接受混合单位（固定值 + 弹性值）的组合。浏览器会静默忽略整个轨道定义，导致网格回退到默认行为——看起来“没生效”。
- 正确写法是用
minmax(100px, 1fr)？错，这是常见误解；实际应写成minmax(100px, max-content)或minmax(100px, 1fr)仅在grid-template-columns/grid-template-rows中与其它fr并列时才合法（此时上下文已明确是弹性轨道） - 更稳妥的做法：用
minmax(100px, minmax(0, 1fr))——外层限制最小，内层让1fr在可用空间中生效 - 如果目标是“至少 100px，最多占满剩余空间”，直接用
minmax(100px, 1fr)在现代浏览器（Chrome 66+、Firefox 63+）中已支持，但 Safari 14.1 之前会失败
grid-template-columns 里放多个 minmax() 怎么避免项被压缩变形
多个 minmax() 并列时，浏览器按顺序分配空间，但若总最小值之和超过容器宽度，所有项都会被强制收缩到各自 min 值，甚至触发横向滚动。
- 检查总最小宽度：比如
minmax(200px, 1fr) minmax(300px, 1fr) minmax(150px, 1fr)，最小合计 650px；若容器只有 600px，第三项会被压到 150px，前两项按比例缩，视觉失衡 - 解决方法：把其中一列改成
minmax(auto, 1fr)，让内容撑开，其余列用固定最小值 - 或统一用
minmax(min-content, 1fr)，让文字/图片自然决定基础宽度，再弹性伸展
响应式中用 minmax() 配合 clamp() 还是媒体查询
clamp() 本身不能嵌套进 minmax()，CSS 不允许函数嵌套（minmax(clamp(...), 1fr) 会报解析错误）；想实现“随屏幕变宽，单元格从 200px 渐进到 350px，再保持”得靠组合策略。
- 推荐做法：用媒体查询分段控制
grid-template-columns，例如小屏minmax(150px, 1fr)，中屏minmax(250px, 1fr)，大屏minmax(350px, 1fr) - 如果追求简洁，可改用
minmax(200px, clamp(200px, 50vw, 350px))——注意这里clamp()是独立作为最大值参数，不是嵌套 - 注意 Safari 对
clamp()在 grid 轨道中的支持比 Chrome 晚半拍，iOS 15.4+ 才稳定
flex 项目里误用 minmax() 导致样式失效
minmax() 是 CSS Grid 专属函数，Flex 布局中完全无效。写在 flex-basis 或 width 里只会被当作非法值丢弃，浏览器 fallback 到 auto 或初始值。
- Flex 下想实现类似效果：用
flex: 1 1 minmax(200px, 300px)？不行，语法错误；正确是flex: 1 1 200px+max-width: 300px - 或者换思路：Flex 容器设为
display: grid，哪怕只有一行，也能用minmax()精确控大小 - 容易踩坑的是复制粘贴代码时没注意上下文——看到别人 Grid 里用了
minmax()，自己 Flex 项目也照搬，结果啥都没变
事情说清了就结束。真正难的不是写对 minmax()，而是判断它该不该出现在当前布局里；Grid 和 Flex 的边界模糊时，先问一句：我到底需要“二维空间划分”还是“一维流式排列”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
