MUI Grid - 对齐到末尾答案

【问题标题】：MUI Grid - align to endMUI Grid - 对齐到末尾
【发布时间】：2022-08-15 16:58:07
【问题描述】：

我对使用 MUI Grid 比较陌生，并不想做任何太复杂的事情，但我无法在其他帖子或 Flexbox/MUI 文档中找到解决方案。本质上，我只想将我的“取消”和“保存”按钮一直对齐到屏幕右侧。文档似乎使这看起来非常简单，但我的页面布局没有受到影响。我一直在尝试 alignItems、alignContent、justifyContent 等，只是为了让它发挥作用——但无济于事。

<Grid container xs={12} justify-content=\'flex-end\'>
    <Grid item xs={6}/>
    <Grid item xs={3}>
        <button 
            onClick={() => doSomething()}
            Click here to cancel
        </button>
    </Grid>
    <Grid item xs={3}>
        <button 
            onClick={() => doSomething()}
            Click here to Save
        </button>
    </Grid>
 </Grid>

标签： css flexbox material-ui

【解决方案1】：

这似乎是justify-content='flex-end' 的输入错误，因为它应该是justifyContent="flex-end"：

    <Grid spacing={2} container xs={12} justifyContent="flex-end">
      <Grid item xs={3}>
        <Item>xs=3</Item>
      </Grid>
      <Grid item xs={3}>
        <Item>xs=3</Item>
      </Grid>
    </Grid>

Working example

此外，由于您只想沿一个水平方向对齐项目，您可能需要使用Stack 而不是Grid。 Stack 用于沿垂直或水平轴对齐项目，不会为这些情况创建冗余 DOM-elements(grid-item containers) ：

        <Stack direction="row" spacing={2} justifyContent="flex-end">
          <Item>Item 1</Item>
          <Item>Item 2</Item>
          <Item>Item 3</Item>
        </Stack>

这个 sn-p 生成的 UI 示例可以在上面的链接中看到。

【讨论】：

【解决方案2】：

如果您使用的是 Material-UI 样式的组件。您可以使用以下样式定义：

 .myClass {
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: flex-end;
}

【讨论】：