Javascript 如何将零部件与中心/右侧对齐

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

我想知道在

材质ui

中是否有合适的方法来实现这一点。我可以使用一个

，但是我必须使用另一个

。看起来工作量太大了

---

或者，我最好使用普通的旧CSS，处理元素的明显零高度。如果你不想使用网格组件，你必须依赖CSS

但是，如果您使用MaterialUI，您应该使用JSS（CSS-IN-JS），而不是简单的CSS

• 导言：
• 好处：

例如，在CSS中，您可以使用这些解决方案中的任何一种。“文本对齐”是最简单的一个

• 文本对齐：右

• float:右

• 柔性箱
  • 父级：显示：flex
  • 具有以下内容的子项：

    align content:flex end

---

材质UI的网格组件有辅助道具来实现这一点

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

点击我

您可以找到文档。

试试这个

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

例子

将Box组件与flex一起使用

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

---

您可以在较旧的版本中了解更多信息

，但不会回答以下问题：如果容器网格中有两个网格项，而我只想对齐第二个网格项，对吗？然后将您的项目转换为容器（网格可以同时为两个），这样您的项目将类似于：