在中心和右端对齐项目

Question

我想对齐两个项目，如下所示：

第一行中间的第一个。 第二个，与第一个在同一行，但在远端。

我尝试过：

  <Grid container alignItems="center" justify="center">
    <Grid item>
      <Typography variant="subtitle2">
        4 / 4
      </Typography>
    </Grid>
    <Grid
      container
      alignItems="flex-start"
      justify="flex-end"
      direction="row"
    >
      <IconButton>
        <HelpOutlineIcon />
      </IconButton>
    </Grid>
  </Grid>

但是我得到了

基本上，我希望问号图标位于同一行4/4的最右边，如黑色箭头所示。

Answer 1

一种选择是伪造它，并在开头放置一个空白的<div/>，然后有3个div并可以轻松地用justify-content: space-between隔开

另一种方法是将问号放置在absolute上，确保父级是position: relative，然后将top: Xpx和right: Xpx应用于{{1 }}是您要为其提供间距的像素数

Answer 2

我添加了一个temp div和justify =“ space-between。这对我有用。

<Grid container alignItems="center" justify="space-between">
  <div></div>
  <Typography variant="subtitle2">4 / 4</Typography>
  <IconButton>
    <HelpOutlineIcon />
  </IconButton>
</Grid>