使用 Material UI 网格，但 Justify 道具不起作用？答案

【问题标题】：Using Matrial UI grid, but Justify props is not working?使用 Material UI 网格，但 Justify 道具不起作用？
【发布时间】：2021-08-05 13:25:59
【问题描述】：

在这里，justify 对我不起作用。猜猜为什么？

  <Grid container direction='column' alignItems='center' justify='center' spacing='1'>
    <Grid item xs={12}>
       <Typography variant='h1'>Firt Item</Typography>
    </Grid>
    <Grid item xs={12}>
       <Typography variant='h4'>Firt Item</Typography>
    </Grid>
    <Grid item xs={12}>
       <Typography variant='h6'>Firt Item</Typography>
    </Grid>
  </Grid>

【问题讨论】：

“对齐道具不起作用”是什么意思？当前的行为是什么？预期的行为是什么？

标签： javascript flexbox material-ui grid containers

【解决方案1】：

它按预期工作。问题是 Grid 组件的高度等于其子组件的高度。因此，justify 值的更改在 direction='column' 时不可见。所以我将 Grid 组件的高度设置为 300px，如下所示：

<Grid
      style={{ height: "300px" }}
      container
      direction="column"
      alignItems="center"
      justify="flex-end"
    >

使更改可见here in sandbox

【讨论】：