完全行且推荐，css grid负责区域划分，flex负责内部对齐；常见问题包括grid项高度未定义导致flex的height: 100%失效、align-items: stretch拉伸干扰、方向误判、fr单位压缩、嵌套过深难维护、ie11不支持grid等。
Grid容器里直接用display: flex行不行
完全行，而且是推荐做法。CSS Grid负责大块区域划分，Flex负责内部元素对齐，两者分工明确，不是互斥关系。
常见错误现象：display: flex写在Grid项（即grid-item）上却没生效，大概率是因为父级Grid项被设了align-items: stretch（默认值），而子Flex容器高度未显式定义，导致Flex的height: 100%失效。
- 确保Grid项本身有明确高度来源（比如父Grid设了
grid-template-rows: 200px，或自身设min-height） - Flex容器加
height: 100%前，先确认其父级（Grid项）计算后高度不为auto - 别在Grid项上同时滥用
justify-content和Flex的justify-content——外层Grid已居中，内层Flex再居中可能造成意外偏移
Grid项内Flex方向与Grid轨道方向冲突怎么办
不会真冲突，但容易误判“对齐失效”。比如Grid列方向布局（grid-template-columns: 1fr 2fr），你在右侧Grid项里用flex-direction: column，结果发现文字堆顶、留白在下——这不是冲突，是Flex默认align-items: stretch拉满高度，而内容又没撑开。
- 检查Flex容器的
align-items和justify-content是否符合预期；常用组合：flex-direction: column; justify-content: center; align-items: flex-start - Grid轨道尺寸是静态划分的，Flex方向是动态排列的，二者影响维度不同：Grid管“在哪”，Flex管“怎么排”
- 移动端适配时注意：Grid的
fr单位在小屏下可能压缩过猛，导致Flex容器宽度不足，flex-wrap: wrap才开始起作用——这时要配合min-width: 0防溢出
嵌套太深导致性能变差？要不要避免
现代浏览器对单层Grid+单层Flex嵌套毫无压力。真正拖慢渲染的是频繁重排（reflow）和大量calc()、clamp()嵌套计算，不是嵌套本身。
- 避免三层及以上嵌套：Grid → Flex → Grid → Flex，这种结构难维护，调试时样式溯源成本高
- 慎用
grid-template-areas配合Flex：命名区域本身不感知Flex行为，一旦Flex改变子元素顺序，视觉和语义就脱节 - 若需复杂对齐（如左对齐标题+右对齐按钮+垂直居中图标），优先用Flex的
margin-left: auto，而不是靠Grid多划一个轨道来“挤”位置
IE11下Grid+Flex嵌套直接崩溃
不是崩溃，是彻底不识别display: grid，整个Grid容器退化为block，里面的display: flex倒还能工作——但布局全乱。
- 别指望在IE11里“优雅降级”嵌套布局；要么用
@supports (display: grid)做功能检测，要么整站放弃Grid，改用Flex或float模拟 - 如果必须兼容，把Grid逻辑拆成独立CSS类，通过JS检测
CSS.supports('display', 'grid')后动态添加类名 - 注意
grid-gap在IE11无替代方案，得用padding+margin手动模拟，且Flex容器内gap也不支持
最常被忽略的一点：Grid项的box-sizing默认是content-box，而Flex子项如果带padding又没设box-sizing: border-box，在小尺寸Grid轨道里极易溢出——这个细节比嵌套层数更早引发问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
