flex-grow: 1 无效主因是父容器缺失明确宽/高，需设 min-height: 100vh 或 min-width: 100% 并确保高度/宽度链完整；auto-fit 响应式网格须配 minmax() 与子元素收敛；safari 下用 100dvh 替代 100vh；flex-wrap + space-between 需配合 min-width 控制换行。
flex-grow: 1 为什么没效果
多数人写 flex-grow: 1 后发现元素没撑开，页面底部或右侧留白——根本不是属性写错了，而是父容器没设高度或宽度，导致「无剩余空间可分配」。
Flex 项只在父容器有明确可用空间时才按比例伸展。浏览器默认不把 html 或 body 当作有尺寸的容器，所以子元素的 flex-grow 实际无空间可长。
- 根级 Flex 容器必须设
min-height: 100vh（高度场景）或min-width: 100%（宽度场景），不能只靠height: 100% - 若嵌套多层，中间任意一层漏了
min-height: 100%或width: 100%，高度/宽度传递链就断了 -
flex-direction: column是填高前提；row方向才填宽 - 避免同时写
flex-grow: 1和height: 100%（或width: 100%），两者冲突，浏览器优先服从后者
grid-template-columns: repeat(auto-fit, ...) 怎么写才真响应
直接用 repeat(auto-fit, minmax(250px, 1fr)) 是主流解法，但光写这行 CSS 不够——它不报错，但列数可能卡死、小屏仍横向滚动，问题几乎全出在子元素上。
auto-fit 会收缩空轨道，让有内容的列均分剩余空间，比 auto-fill 更适合卡片、列表等真实业务场景。
- 必须搭配
minmax()：单独repeat(auto-fit, 1fr)在 Safari 16.3 及更早版本会静默退化为单列 - 子元素要主动收敛：
img加max-width: 100%和height: auto；含display: flex的子项加min-width: 0防止隐式最小宽度劫持计算 - 文字溢出需控制：
overflow: hidden+text-overflow: ellipsis，禁用white-space: nowrap（除非明确需要） - 父容器本身得有明确宽度：检查是否被上层
white-space: nowrap或未设width: 100%拖累
移动端 Safari 下 100vh 填不满怎么办
iOS 15+ Safari 对 100vh 解析异常：软键盘弹出时视口高度突变，min-height: 100vh 瞬间缩水，Flex 内容区立刻塌陷——这不是代码 bug，是视口单位被重置了。
- 首选解法：改用
min-height: 100dvh（dynamic viewport height），Safari 16.4+ 支持 - 兼容 fallback：用 JS 监听
resize，动态更新element.style.minHeight = window.innerHeight + 'px' - 绝对禁止在 Flex 内容区里用
position: absolute，它脱离文档流，绕过 Flex 的空间分配逻辑 - 不要给内容区设固定
height，哪怕只是height: 100%，它会覆盖 Flex 的自动计算
Flex wrap + space-between 怎么让子项自动换行并填满
当目标是「一组 div 在宽屏下铺满一行、窄屏下自动换行、每行内均匀分布」时，flex-wrap: wrap 搭配 justify-content: space-between 是最轻量解法，比 Grid 更易控。
- 父容器设
display: flex+flex-wrap: wrap+justify-content: space-between - 每个子项设
flex: 0 0 auto（即不放大不缩小，由内容或 min-width 决定基础尺寸），再加min-width: 280px类约束最小占位 - 注意：space-between 在单个子项时无效（首尾无间距），若数据动态且可能只剩一项，可改用
justify-content: center或 JS 动态切样式 - gap 不支持旧版 Flex，如需兼容 IE，用
margin模拟，但要注意最后一行末尾多出的 margin
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
