如何将组件对齐到中心/右侧

Question

我想将我的按钮与父母的右侧对齐.

我想知道是否有适当的方法来做到这一点material-ui.我可以使用a <Grid container justify="flex-end">然后我将不得不使用另一个<Grid item />.似乎工作太多了.

或者也许我最好使用普通的旧CSS,搞乱float: right和处理元素的明显零高度.

Answer 1

如果您想对齐其中的项目，<Grid item>可以使用包装Box组件，如下所示：

<Grid container>
  <Grid item sm={6}>
    <Box display="flex" justifyContent="flex-end">
      <Button>Button Aligned To The Right</Button>
    </Box>
  </Grid>
</Grid>

有关更多定位选项，请参阅文档。

Answer 2

在Material UI v5中，您可以用于Stack在行或列上显示一组组件。Stack是一个弹性盒子，所以你只需要设置justifyContentprop 来对齐里面的项目：

<Stack direction="row" justifyContent="end">
  <Button variant="contained">Item 1</Button>
</Stack>

Answer 3

尝试这个

<Grid container alignItems="flex-start" justify="flex-end" direction="row">
     <Button variant="contained">Add account</Button>
</Grid>