无法让``align items=“baseline”`正常工作

Question

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

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

ExpectationVsReality.png

Sandbox project

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>
    </>
  );
}

Answer 1

您可以向想要放置在底部的元素添加align-self: flex-end;样式，在本例中，如果您希望所有元素都底部对齐，则如下所示：

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

如果你想让一些元素的行为像这样，那么创建一个具有相同样式的新类：

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

编辑:在App.tsx文件上添加样式表：：

import "./styles.css";

Add stylesheet to your project

Answer 2

字段的名称有误：alignItems="baseline"