Javascript 为什么可以'；我不能把这些卡片排成一行。他们不断地陷入一个纵队

下面是我正在使用的代码，包括样式。它是React站点的一个组件，由于某些原因，我无法使卡片在一行中均匀分布。我还想为较小的屏幕尺寸实现一些断点，但除非有人有想法或理由首先这样做，否则每次都要实现一个断点（我从一些程序员那里听说，从小屏幕开始，然后开始工作……有什么想法吗？）让我知道，如果有任何其他需要解决的问题，我感谢和帮助提前

import React from "react";  

...

import MoreVertIcon from "@material-ui/icons/MoreVert";

const useStyles = makeStyles((theme) => ({
  root: {
    maxWidth: 345,
  },
  media: {
    height: 0,
    paddingTop: "56.25%", // 16:9
  },
  expand: {
    transform: "rotate(0deg)",
    marginLeft: "auto",
    transition: theme.transitions.create("transform", {
      duration: theme.transitions.duration.shortest,
    }),
  },
  expandOpen: {
    transform: "rotate(180deg)",
  },
  avatar: {
    backgroundColor: red[500],
  },
}));

export default function RecipeReviewCard() {
  const classes = useStyles();
  const [expanded, setExpanded] = React.useState(false);

  const handleExpandClick = () => {
    setExpanded(!expanded);
  };

  return (
    <div>

      <Card className={classes.root}>
        <CardHeader
          avatar={
            <Avatar aria-label="recipe" className={classes.avatar}>
              R
            </Avatar>
          }
          action={
            <IconButton aria-label="settings">
              <MoreVertIcon />
            </IconButton>
          }
          title="Shrimp and Chorizo Paella"
          subheader="September 14, 2016"
        />
        <CardMedia
          className={classes.media}
          image="/static/images/cards/paella.jpg"
          title="Paella dish"
        />
        <CardContent>
          <Typography variant="body2" color="textSecondary" component="p">
            This impressive...like.
          </Typography>
        </CardContent>
        <CardActions disableSpacing>
          <IconButton aria-label="add to favorites">
            <FavoriteIcon />
          </IconButton>
          <IconButton aria-label="share">
            <ShareIcon />
          </IconButton>
          <IconButton
            className={clsx(classes.expand, {
              [classes.expandOpen]: expanded,
            })}
            onClick={handleExpandClick}
            aria-expanded={expanded}
            aria-label="show more"
          >
            <ExpandMoreIcon />
          </IconButton>
        </CardActions>
        <Collapse in={expanded} timeout="auto" unmountOnExit>
          <CardContent>
            <Typography paragraph>Method:</Typography>
            <Typography paragraph>
              Heat 1/2 cup...10 minutes.
            </Typography>
            <Typography paragraph>
              Heat oil...bring to a boil.
            </Typography>
            <Typography paragraph>
              Add rice and ...don’t
              open.)
            </Typography>
            <Typography>
              Set aside off of the heat to let rest for 10 minutes, and then
              serve.
            </Typography>
          </CardContent>
        </Collapse>
      </Card>

      <Card className={classes.root}>
        <CardHeader
          avatar={
            <Avatar aria-label="recipe" className={classes.avatar}>
              R
            </Avatar>
          }
          action={
            <IconButton aria-label="settings">
              <MoreVertIcon />
            </IconButton>
          }
          title="Shrimp and Chorizo Paella"
          subheader="September 14, 2016"
        />
        <CardMedia
          className={classes.media}
          image="/static/images/cards/paella.jpg"
          title="Paella dish"
        />
        <CardContent>
          <Typography variant="body2" color="textSecondary" component="p">
            This impressive ... like.
          </Typography>
        </CardContent>
        <CardActions disableSpacing>
          <IconButton aria-label="add to favorites">
            <FavoriteIcon />
          </IconButton>
          <IconButton aria-label="share">
            <ShareIcon />
          </IconButton>
          <IconButton
            className={clsx(classes.expand, {
              [classes.expandOpen]: expanded,
            })}
            onClick={handleExpandClick}
            aria-expanded={expanded}
            aria-label="show more"
          >
            <ExpandMoreIcon />
          </IconButton>
        </CardActions>
        <Collapse in={expanded} timeout="auto" unmountOnExit>
          <CardContent>
            <Typography paragraph>Method:</Typography>
            <Typography paragraph>
              Heat 1/2 cup...10 minutes.
            </Typography>
            <Typography paragraph>
              Heat oil ... to a boil.
            </Typography>
            <Typography paragraph>
              Add rice...that don’t
              open.)
            </Typography>
            <Typography>
              Set aside off of the heat to let rest for 10 minutes, and then
              serve.
            </Typography>
          </CardContent>
        </Collapse>
      </Card>
      
    </div>
  );
}

从“React”导入React；
...
从“@material ui/icons/MoreVert”导入MoreVertIcon；
const useStyles=makeStyles（（主题）=>({
根目录：{
最大宽度：345，
},
媒体：{
高度:0,，
paddingTop:“56.25%，//16:9
},
扩展：{
变换：“旋转（0度）”，
marginLeft：“自动”，
转换：theme.transitions.create（“转换”{
持续时间：theme.transitions.duration.shortest，
}),
},
expandOpen：{
变换：“旋转（180度）”，
},
化身：{
背景颜色：红色[500]，
},
}));
导出默认函数RecipeReviewCard（）{
const classes=useStyles（）；
const[expanded，setExpanded]=React.useState（false）；
常量handleExpandClick=（）=>{
setExpanded（！expanded）；
};
返回(
这让人印象深刻…就像。
方法：
加热1/2杯…10分钟。
把油加热……烧开。
加米饭，不要吃
打开。）
把火放在一边休息10分钟，然后
发球。
这让人印象深刻…就像。
方法：
加热1/2杯…10分钟。
把油烧开。
加上米饭……那就不会了
打开。）
把火放在一边休息10分钟，然后
发球。
);
}

您能否在包装

元素的

上发布显示属性？除非我遗漏了什么（很明显，如果我遗漏了，我会删除这篇文章），这里显示的是用于渲染卡片的样式，而不是用于渲染彼此/容器之间的关系的样式？所以也许是朝着这样的方向努力

<div className="cardWrapper" style={ {
  display: flex, 
  flexDirection: row
  justifyContent: spaceAround } }>
   <Card />
   <Card />
   <Card />
</div>

---

我应该注意，我已经把它们排成了一行，但现在需要努力使它们响应断点。对于最有效的方法有什么建议吗？我的方法是在css文件（未显示）中更改每行的卡片数量和相应断点中的卡片大小。