材质用户界面。网格内的 2 个项目；一个左对齐，一个右对齐。在同一行

Question

我很难理解如何正确使用 Material UI 的 flexbox 整数：

这样我可以按照我想要的方式对齐项目：

export default function Home() {
    return (
        <Grid container justify={"space-between"}>
            <Grid item>
                <Typography>Left text</Typography>
            </Grid>
            <Grid item>
                <Typography>Right text</Typography>
            </Grid>
        </Grid>
    );
}

但我希望这也应该有效：

export default function Home() {
    return (
        <Grid container>
            <Grid item xs={6} justify={"flex-start"}>
                <Typography>Left text</Typography>
            </Grid>
            <Grid item xs={6} justify={"flex-end"}>
                <Typography>Right text</Typography>
            </Grid>
        </Grid>
    );
}

但后者并没有达到预期的结果。我在这里错过了什么？

Answer 1

如果不定义 Typography 组件类型，它将生成 <p> 标签，它是块类型的。 您可以在文档中找到它：https://material-ui.com/api/typography/ 因此，您确实对齐了一些正确的东西，但是“某物”需要整整 6 列。文本没有对齐，它的标题标签是。

你应该在“Right text”排版组件上试试这个：

<Typography align="right">Righttext</Typography>

编辑：您还可以将 container 属性添加到 Grid 组件。这样，您就可以使用 justify 属性：

<Grid item container xs={6} justify={"flex-end"}>
    <Typography>Right text</Typography>
</Grid>

当您将 container 属性添加到 Grid 组件时，该组件的子组件将成为 flex 元素。这样你就不必知道每个 Material 组件在渲染组件时会生成哪些标签。

您可以在这个 Material 文档示例中检查此行为： https://material-ui.com/components/grid/#nested-grid