Grid容器中子元素用Flex不生效，主因是Flex未作用于含多个直系子节点的直接子容器；Grid Item上设justify-content/align-items无效，需写在display: flex的子容器上；固定轨道高度易致Flex内容截断，应改auto或加overflow处理。
Grid容器里子元素用Flex不生效？检查display覆盖
常见错误是给Grid的直接子元素（即Grid Item）设了display: flex，但父容器用了display: grid后，子元素的display属性本身不会失效，真正问题常出在：子元素内部结构没写对，或Flex容器没正确包裹内容。
关键判断点：Flex必须作用于「有多个直系子节点需要排列」的那个容器上。如果Grid单元格里只有一层DOM，display: flex加了也看不出效果。
- 确保Flex容器是Grid Item的**直接子元素**，不是Grid Item自己
- Grid Item默认是block级盒子，它内部可以放心嵌套
div并设display: flex - 别在Grid Item上同时写
display: grid和display: flex——后者会覆盖前者，但语义错乱
Grid + Flex嵌套时justify-content/align-items行为异常
Grid Item上的justify-content和align-items无效，因为这两个属性只对Flex或Grid容器本身起作用；放在普通块级元素或Grid Item上没意义。
想控制Grid单元格内Flex子项的对齐，必须把Flex相关属性写在那个display: flex容器上：
立即学习“前端免费学习笔记（深入）”；
-
justify-content控制主轴（默认row方向）对齐 -
align-items控制交叉轴对齐 - 如果Flex容器设了
flex-direction: column，两者的主/交叉轴角色就互换了
示例：
.grid-item { display: grid; }<br>.flex-container { display: flex; justify-content: center; align-items: flex-start; }
Grid轨道尺寸固定时，内部Flex内容被截断
Grid设了grid-template-rows: 100px这类固定高度，而内部Flex容器有flex-direction: column且子项总高超限，就会发生溢出或截断——这不是Flex的问题，是Grid轨道没留够空间。
解决思路取决于场景：
- 想让Flex内容撑开Grid单元格：把Grid行高改成
auto或minmax(min-content, max-content) - 想保持Grid轨道固定但允许滚动：给Flex容器加
overflow-y: auto和max-height: 100% - 注意
height: 100%在Flex容器里可能不生效，优先用flex: 1或min-height: 0配合
React/Vue中动态渲染导致Flex嵌套错乱
框架里用v-for或{items.map()}生成Grid Item，再在每个Item里渲染Flex结构，容易漏掉包裹容器，比如直接把flex类加在循环项上，结果每个Item都成了独立Flex容器，破坏了原本的Grid布局意图。
典型翻车现场：
- 把
className="flex"写在了map出来的div上，而不是它里面的子容器 - 条件渲染（如
v-if）删掉了Flex容器，但没同步处理样式逻辑 - 服务端渲染时CSS未加载完成，Flex表现不稳定，建议加
min-height兜底
最稳做法：Grid Item始终是一个语义清晰的容器，Flex结构封装在它内部一个明确命名的子div里，比如class="item-content"。
复杂点在于，Grid的隐式轨道和Flex的弹性计算会叠加影响渲染时机，尤其在动画、resize或字体加载过程中，视觉错位往往不是代码写错了，而是没预留足够容错空间。
