显示 flex 在 Material UI Grid Item 中不起作用答案

【问题标题】：Display flex not working inside Material UI Grid Item显示 flex 在 Material UI Grid Item 中不起作用
【发布时间】：2020-08-06 10:27:15
【问题描述】：

我正在尝试将一个元素放置在网格项目的末尾（水平方向）。为此，我使用以下 div 组件包装我的组件：

完整代码：

<Grid container spacing={8} alignItems={'stretch'}>
  <Grid item xs={9} >
    ...other components
    <div style={{  display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', alignItems: 'flex-end' }}>
      <p>hello world</p>
    </div>
  </Grid>
</Grid>

当我在 Grid 外部使用 div 组件时，元素会浮动到容器的右侧，但在 Grid 内部不起作用。另请注意，此 Grid 是从 Material UI 导入的。任何帮助将不胜感激。谢谢。

【问题讨论】：

你可以做一件事。您可以在 Grid 项中添加另一个 Grid 容器，并为您的组件和 div 放置单独的网格项（使用 hello world）。 @Parichay 你明白我的意思了吗？
寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Reproducible Example

标签： html css reactjs flexbox material-ui

【解决方案1】：

从您的问题来看，我认为您正试图将“Hello World”放在容器的右边缘...但是您已将其放入网格中并使用 xs={9}... 来实现它，只需将您的带有xs={12} 的网格内的“Hello World”

相关HTML：

<div className={classes.root}>
      <Grid container alignItems={"stretch"}>
        <Grid item xs={9}>
          ...other components
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              justifyContent: "flex-end",
              alignItems: "flex-end"
            }}
          >
            <p>hello world</p>
          </div>
        </Grid>
        <Grid item xs={12}>
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              justifyContent: "flex-end",
              alignItems: "flex-end",
              color: "red"
            }}
          >
            <p>I think you mean to do this... hello world</p>
          </div>
        </Grid>
      </Grid>
    </div>

工作stackblitz here

【讨论】：