不能让' alignitems="baseline"工作

我可以在链接沙箱项目上复制问题，但基本上我想要文本的底部(不同的字体大小)对齐/在相同的y轴上。不知道该怎么说。

看看这张照片，看看我需要什么。下面的代码。我错过了什么？

ExpectationVsReality。png

沙箱项目

import "@material-ui/core";
import { Box } from "@material-ui/core";
export default function App() {
  return (
    <>
      <Box display="flex" align-items="baseline" flex-direction="row">
        <Box fontSize="2em" fontWeight="600">
          Belinda Carlisle
        </Box>
        <Box>12345678</Box>
      </Box>
    </>
  );
}

###字段名错误alignItems="baseline"

对于你想要放置在底部的元素，在你的情况下，如果你想要所有的元素都是底部对齐的，它看起来像:align-self: flex-end; to the elements you want to 在这种情况下，你想要一些只是一些元素的行为像这样创建一个新的类与相同的样式:

.MuiBox-root {
    align-self: flex-end;
}

编辑:

.aligned-bottom {
    align-self: flex-end;
}

在你的

文件添加样式表:App.tsx file ad向项目中添加样式表

import "./styles.css";