Reactjs 反应材料界面，如何布局卡片组件以对齐文本

所以本质上我想完成我在AdobeXD中设计的这个块

Adobe XD卡设计

以下是我实现以下功能的代码：

const useStyles = makeStyles({
  root: {
    minWidth: 275,
    maxWidth: 300
  },

  title: {
    fontSize: 14
  },
  pos: {
    marginBottom: 5
  }
});

export default function SimpleCard() {
  const classes = useStyles();
  const bull = <span className={classes.bullet}>•</span>;

  return (
    <Card className={classes.root}>
      <CardContent>
        <Typography
          className={classes.title}
          color="textSecondary"
          display="inline"
        >
          Physics
        </Typography>
        <Typography display="inline" align="right" style={{ marginLeft: 110 }}>
          benevolent
        </Typography>

        <Typography variant="body2" component="p" align="left">
          10/25/2001
        </Typography>
      </CardContent>
    </Card>
  );
}

const useStyles=makeStyles({
根目录：{
最小宽度：275，
最大宽度：300
},
标题：{
尺寸：14
},
pos:{
marginBottom:5
}
});
导出默认函数SimpleCard（）{
const classes=useStyles（）；
康斯特布尔=•；
返回(
物理
仁慈的
10/25/2001
);
}

以下是代码笔链接：

---

问题是，在第一行中，我必须手动设置两个排版标签之间的距离。因此，基本上物理和仁爱之间的距离是手动设置的。如何自动确定该距离？还有，我怎样才能更接近我的设计呢？

你试过使用flexbox吗？您可以将每一行放在一个div中，并使用带有不同“between”选项的justify内容。这将根据您选择的选项在每个选项之间设置一个距离

这可能是最好的两种选择：

justify-content: space-between;

justify-content: space-around;

另外，使用

对齐项目：居中
可能有助于垂直居中

如果这无法直接工作，您可能需要尝试添加
！对于新的CSS代码很重要，因为我知道材质UI对样式很挑剔
 您尝试过使用flexbox吗？您可以将每一行放在一个div中，并使用带有不同“between”选项的justify内容。这将根据您选择的选项在每个选项之间设置一个距离

这可能是最好的两种选择：

justify-content: space-between;

justify-content: space-around;

另外，使用
对齐项目：居中
可能有助于垂直居中

如果这无法直接工作，您可能需要尝试添加
！对于新的CSS代码很重要，因为我知道材质UI对样式很挑剔
 使用以下类，Flex box可以轻松实现您想要的功能：

const useStyles = makeStyles({
  header: {
    display: "flex",
    justifyContent: "space-between"
  }
});

如果您使用div来包装排版：

  <div className={classes.header}>
    <Typography
      className={classes.title}
      color="textSecondary"
      display="inline"
    >
      Physics
    </Typography>
    <Typography display="inline" align="right">
      benevolent
    </Typography>
  </div>
  ...


物理
仁慈的
...

然后它就可以实现您想要的功能。
通过以下类，Flex box可以轻松实现您想要的功能：

const useStyles = makeStyles({
  header: {
    display: "flex",
    justifyContent: "space-between"
  }
});

如果您使用div来包装排版：

  <div className={classes.header}>
    <Typography
      className={classes.title}
      color="textSecondary"
      display="inline"
    >
      Physics
    </Typography>
    <Typography display="inline" align="right">
      benevolent
    </Typography>
  </div>
  ...


物理
仁慈的
...

然后它会实现你想要的