Question

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

我想知道在material-ui中是否有正确的方式。我可以使用<Grid container justify="flex-end">但我必须使用另一个<Grid item />。似乎工作太多了。

或许我最好使用普通的旧CSS，弄乱float: right并处理元素的明显零高度。

Answer 1

尝试一下

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

Answer 2

材料UI的网格组件具有帮助实现此目的的辅助道具。

<Grid align-items-xs-center justify-xs-flex-end>
 <Button>Click me</Button>
</Grid>

您可以找到文档here。

Answer 3

如果您不想使用Grid组件，则必须依靠CSS。

但是，如果您使用Material-UI，则应使用JSS（CSS-IN-JS），而不要使用纯CSS。

简介：https://material-ui.com/customization/css-in-js/
好处：http://cssinjs.org/benefits

例如，在CSS中，您可以使用任何这些解决方案。 “ text-align”是最简单的一种。

text-align: right
float: right
flexbox
- 父母：display: flex
- 孩子：align-content: flex-end

Answer 4

将box组件与flex一起使用。

<Box display="flex" flexDirection="column" >
  <... other stuff/>
</Box>

您可以了解更多here

Answer 5

对于最新的 material-ui 版本，使用 justify="flex-end" 相当于 css text-align 和 flex-end=right

    <Grid container justify="flex-end">
         <Button>Example</Button>
    </Grid>

or
    <Grid item justify="flex-end">
         <Button>Example</Button>
    </Grid>

对于旧的 material-ui 版本

    <Grid container alignContent="flex-end">
         <Button>Example</Button>
    </Grid>

or
    <Grid item alignContent="flex-end">
         <Button>Example</Button>
    </Grid>

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

5 个答案: