MUI v5 Grid中justifyContent: space-evenly不生效问题排查

核心问题分析 #

1. justifyContent="space-evenly"无效：
   内层的行方向Grid容器虽然嵌套在xs={12}的Grid项中（该项占满外层宽度），但如果你的视口宽度小于三张卡片总宽度（3×300=900px），flex容器没有剩余空间可分配，space-evenly自然起不到效果。
   另外，你给内层Grid设置了pt:10和pb:10（对应MUI的80px上下内边距），加上卡片高度400px，内层Grid总高度达到560px，直接撑开了外层Grid（外层仅设置minHeight:500），导致外层的垂直居中效果完全被抵消。

2. 冗余结构添乱：
   中间嵌套的xs={12} Grid项完全多余，徒增布局复杂度，没有实际作用。

修复后的代码 #

<Grid
  container
  spacing={0}
  direction="column"
  alignItems="center"
  justifyContent="center"
  sx={{
    minHeight: 500,
    backgroundColor: '#f1f2f3',
    '&:hover': {
      backgroundColor: '#ffffff',
    },
  }}
>
  {/* 移除冗余的xs={12}项，直接放置卡片容器 */}
  <Grid
    container
    direction="row"
    justifyContent="space-evenly"
    alignItems="center"
    sx={{
      width: '100%', // 强制占满外层宽度，给space-evenly提供可用空间
      py: 2, // 缩小上下内边距，避免撑开外层容器
      maxWidth: 1200, // 可选：限制最大宽度，防止宽屏时间距过大
    }}
  >
    <Grid item>
      <Card sx={{
        width: 300,
        height: 400,
        backgroundColor: "#030814",
      }}>
      </Card>
    </Grid>
    <Grid item>
      <Card sx={{
        width: 300,
        height: 400,
        backgroundColor: "#030814",
      }}>
      </Card>
    </Grid>
    <Grid item>
      <Card sx={{
        width: 300,
        height: 400,
        backgroundColor: "#030814",
      }}>
      </Card>
    </Grid>
  </Grid>
</Grid>

关键调整说明 #

• 删掉多余的xs={12} Grid项：减少层级，让布局逻辑更清晰。
• 给内层Grid加width: '100%'：确保容器占满外层宽度，这样space-evenly才能在左右和卡片之间分配剩余空间。
• 调整内边距为py:2：避免过大的内边距撑破外层容器的最小高度，保证垂直居中效果正常显示。
• 可选maxWidth：防止屏幕过宽时卡片间距过大，优化视觉体验。

如果一定要保留原有的上下内边距，只需把外层Grid的minHeight调大到大于内层内容总高度（比如minHeight: 600），这样外层容器就有足够空间让内容垂直居中。

内容的提问来源于stack exchange，提问作者smaica