为什么我不能让这些卡片排成一排。它们持续落入一列

Question

这是我正在使用的代码，包括样式。它是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>
);
}

Answer 1

您能在包装<Card>元素的<div>上发布显示属性吗？除非我遗漏了什么(很明显，如果我遗漏了，我会删除这篇文章(，否则这里显示的是渲染卡片的方法，而不是渲染它们彼此/容器的关系？所以也许会朝着这样的方向努力。。。

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