0

我尝试在我的应用程序上有一个标题，其中左侧项目 (A) 与标题的左侧对齐，第二项 (B) 位于标题的中心，第三项与右侧对齐。

我尝试了很多，发现只有这对我有用

const AppHeader = () => {
    return(
        <Grid container
              alignItems="baseline"
        >
            <Grid item xs={4}>
                <Grid container justify="flex-start">
                    A
                </Grid>
            </Grid>
            <Grid item xs={4}>
                <Grid container justify="center">
                    B
                </Grid>
            </Grid>
            <Grid item xs={4}>
                <Grid container justify="flex-end">
                    C
                </Grid>
            </Grid>
        </Grid>
    )
}

我认为这是一个丑陋的解决方案，因为在项目中放置一个容器对我来说似乎是不必要的。特别是如果我们认为这个容器没有网格项目。我真的很想告诉该项目将其内容与某个位置对齐。如果这个解决方案更像他的解决方案会更好：

 const AppHeader = () => {
        return(
            <Grid container
                  alignItems="baseline"
            >
                <Grid item xs={4} justify="flex-start">
                     A
                </Grid>
                <Grid item xs={4} justify="center">
                     B
                </Grid>
                <Grid item xs={4} justify="flex-end">
                     C
                </Grid>
            </Grid>
        )
    }

有没有办法做类似的事情？

4

1 回答 1

1

假设您正在使用material-uiGrid 组件。你可以做这样的事情

<Grid container direction="row" justify="space-between" alignItems="center">
      <div>A</div>
      <div>B</div>
      <div>C</div>
</Grid>

CodeSandbox 链接：https ://codesandbox.io/s/small-haze-1wvtr

于 2020-02-06T15:18:34.140 回答