一个接一个地显示material-ui卡答案

【问题标题】：Display material-ui cards one next each other一个接一个地显示material-ui卡
【发布时间】：2021-06-28 14:36:12
【问题描述】：

我也尝试使用类似的网格在映射循环内显示卡片。

 <div className={classes.root}>
              {data.tableData.childRows.map((el: any, idx: number) => {
                return (
                  <Grid
                    container
                    spacing={2}
                    direction="row"
                    justify="flex-start"
                    alignItems="flex-start"
                  >
                    <Grid item xs={3}>
                      <Card className={classes.root} variant="outlined">
                        <CardContent>
                          <Typography color="textPrimary" gutterBottom>
                            Name: {data.name}
                          </Typography>
                          <Typography color="textPrimary">
                            Email: {data.email}
                          </Typography>
                          <Typography color="textPrimary">
                            Gateway: {el.gateway}
                          </Typography>
                          <Typography color="textPrimary">
                            ID: {el.id}
                          </Typography>
                          <Typography color="textPrimary">
                            Created: {el.creationDate}
                          </Typography>
                        </CardContent>
                        <CardActions>
                          <Button
                            size="small"
                            onClick={() => {
                              alert("button clicked" + data.email);
                            }}
                          >
                            Action
                          </Button>
                        </CardActions>
                      </Card>
                    </Grid>
                  </Grid>
                );
              })}
            </div>

我的makeStyle是这样的

  const useStyles = makeStyles((theme) => ({
    root: {
      flexGrow: 1,
      padding: theme.spacing(2),
    },
  }));
  const classes = useStyles();

但卡片显示为一张在另一张的顶部，并与左侧对齐。如何将等距的卡片连续显示？

【问题讨论】：

标签： css reactjs flexbox material-ui

【解决方案1】：

您的父 div 元素需要有 display: flex 才能内联可视化它们。试试下面的代码

 const useStyles = makeStyles((theme) => ({
    root: {
      flexGrow: 1,
      padding: theme.spacing(2),
      display: 'flex'
    }
  }));
  const classes = useStyles();

如果您想了解有关 flexbox 的更多信息，请在下面的链接中查看不错的指南。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

@javaFE 如果您发现这个答案很有用，看起来就像您所做的那样，因为被标记为答案，您也可以投票吗？干杯！

【解决方案2】：

你试过了吗？

<Grid
        container
        spacing={2}
        direction="row"
        justify="space-between"
        alignItems="center"
        >

【讨论】：

【解决方案3】：

对各自的小屏幕或大屏幕使用 xs 和 xl 以在 Grid 中与其他屏幕相邻渲染卡片。

例子

<Grid xs={4}>    
</Grid>

【讨论】：