不能让' alignitems="baseline"工作

2022-01-28 03:15:48 标签 htmlcssreactjsflexboxreact-typescript

我可以在链接沙箱项目上复制问题,但基本上我想要文本的底部(不同的字体大小)对齐/在相同的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";

阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码