在网格中定位元素的更好方法答案

【问题标题】：Better way to position elements in a grid在网格中定位元素的更好方法
【发布时间】：2020-02-06 15:14:10
【问题描述】：

我尝试在我的应用程序上设置一个标题，其中左侧项目 (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>
        )
    }

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

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

假设您正在使用material-ui Grid 组件。你可以这样做

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

代码沙盒链接：https://codesandbox.io/s/small-haze-1wvtr

【讨论】：