Css 如何在材质ui卡组件中获得相同的宽度？

如何使这些卡片的宽度相同

当我在材质界面中为这些卡片使用flexbox时，宽度不会得到相同的大小。我怎样才能解决这个问题？我应该使用网格吗？下面是卡组件和屏幕。flexbox我申请了这个屏幕

卡组件

import React from 'react'
import Card from '@material-ui/core/Card'
import CardActionArea from '@material-ui/core/CardActionArea'
import CardActions from '@material-ui/core/CardActions'
import CardContent from '@material-ui/core/CardContent'
import CardMedia from '@material-ui/core/CardMedia'
import Button from '@material-ui/core/Button'
import Typography from '@material-ui/core/Typography'
import { useStyles } from './classes'

const Post = ({card }) => {
  const classes = useStyles()

  return (
    <div>
    <Card className={classes.root}>    
      <CardActionArea>
        <CardMedia className={classes.media}  image={card.selectedFile}/>
        <CardContent>
          <Typography gutterBottom variant='h5' component='h2'>
            {card.title}
          </Typography>
          <Typography variant='body2' color='textSecondary' component='p'>
            {card.description}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>       
        <Button size='small' color='primary'>
          {card.category}
        </Button>
      </CardActions>
    </Card>
  </div>
  )
}

export default Post

屏幕

import React from 'react'
import Post from '../components/card/Post'
import gallery from '../gallery'
import Box from '@material-ui/core/Box';

const Posts = () => {
  return (
    <Box display="flex" flexWrap="wrap" justifyContent="center" m={1} p={1}>
      {gallery.map((card ,index) => (
        <Post key={index} card={card} />
      ))}
    </Box>
  )
}

export default Posts

从“React”导入React
从“../components/card/Post”导入Post
从“../gallery”导入库
从“@material ui/core/Box”导入框；
const Posts=（）=>{
返回(
{gallery.map（（卡片，索引）=>(
))}
)
}
导出默认帖子

不确定是否可能，因为我的react知识不是很好，但也许你可以尝试在卡片上设置最小宽度

或者，由于您在容器上应用了flex，请尝试应用

    flex-grow: 1;
    flex-basis: 0;

准备好了

flex basis

应将卡的基本大小设置为0，通常情况并非如此

flex grow

会将剩余大小平均分配给卡，但由于通常卡的基本大小不是0，因此分配看起来不均匀

通常，使用这两个css标签可以解决如下问题。但正如我在开始时所说，我对react的了解并不是很好，所以我不知道这是否也适用于react

---

我希望这有助于或至少将你推向正确的方向。

如何添加

minWidth

到卡片样式中

从“@material ui/core/styles”导入{makeStyles}
导出常量useStyles=makeStyles（（主题）=>({
根目录：{
最大宽度：345，
最小宽度：100，
保证金：“3rem”，
},
媒体：{
身高：140，
},
}))

我知道，成为第一已经没有任何意义了，可悲的是：(

    flex-grow: 1;
    flex-basis: 0;