Css 使用卡片对物料UI响应网格进行反应

我试图创建一个响应网格布局使用卡，应该有相同的高度，包括图像。我使用的是React和materialui

我现在忙了几个小时，想不出解决办法。“flex”部分对我来说太不直观了。请帮忙

这是一个非常小且简单的代码段：

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        cardGrid: {
            flexGrow: 1,
            paddingTop: 16,
        },
        card: {
            flex: 1,
            height: '100%',
            backgroundColor: 'red',
        },
        cardActionArea: {
            flex: 1,
            height: '100%',
            backgroundColor: 'green',
        },
        cardMedia: {
            height: '0',
            paddingTop: '56.25%', // 16:9
        },
        cardContent: {
            flex: 1,
            backgroundColor: blue[600],
        },
        cardContentTitle: {
            flex: 1,
            backgroundColor: blue[400],
        },
        cardContentRating: {
            backgroundColor: blue[300],
        },
        cardContentDistance: {
            backgroundColor: blue[200],
        }
    }),
);

// ...

<Container className={classes.cardGrid} maxWidth="xl">
    <Grid
        container
        direction="row"
        justify="space-evenly"
        alignItems="stretch"
        spacing={2}
    >
        {
            dataList.map(data => (
                <Grid item
                      key={`GridItem-${data.id}`} xs={12} sm={6} md={4} lg={2} xl={1}
                >
                    <Card className={classes.card}
                          onClick={handleCardClick}
                          key={`OverviewItem-${data.id}`}
                    >
                        <CardActionArea className={classes.cardActionArea}>
                            {
                                data.previewURL &&
                                <CardMedia
                                    className={classes.cardMedia}
                                    image={data.previewURL}
                                    title={data.title}
                                />
                            }
                            <CardContent className={classes.cardContent}>
                                <Typography gutterBottom variant="h5" className={classes.cardContentTitle}>
                                    {data.title}
                                </Typography>
                                <Typography className={classes.cardContentRating}>
                                    Some text
                                </Typography>
                                <Typography className={classes.cardContentDistance}>
                                    Some other text
                                </Typography>
                            </CardContent>
                        </CardActionArea>
                    </Card>
                </Grid>
            ))
        }
    </Grid>
</Container>

const useStyles=makeStyles（（主题：主题）=>
创建样式({
cardGrid：{
flexGrow:1，
paddingTop:16，
},
卡片：{
弹性：1，
高度：“100%”，
背景颜色：“红色”，
},
行动区：{
弹性：1，
高度：“100%”，
背景颜色：“绿色”，
},
cardMedia：{
高度：“0”，
paddingTop:'56.25%'，//16:9
},
卡片内容：{
弹性：1，
背景颜色：蓝色[600]，
},
cardContentTitle：{
弹性：1，
背景颜色：蓝色[400]，
},
信用卡内容评级：{
背景颜色：蓝色[300]，
},
cardContentDistance：{
背景颜色：蓝色[200]，
}
}),
);
// ...
{
dataList.map（数据=>(
{
data.previewURL&&
}
{data.title}
一些文本
其他一些文本
))
}

我正在努力实现的目标：

• 图像应位于每张卡的顶部
• “一些文本”和“一些其他文本”应该移到底部

当我走到树下时，我似乎不得不多次写“flex:1”和“height:'100%”，在某个点上它完全崩溃了，如下面的屏幕截图所示：

上面的代码片段如下所示：

简单地将网格项的子项扩展到其最大高度，并且仍然能够按照我的需要对齐它们，这有什么神奇之处呢

例如，整个卡片应延伸到网格项目区域，图像下方的标题部分应展开，以将图像移动到顶部，“一些文本”和“一些其他文本”移动到底部

任何提示/想法都将不胜感激

我能够实现我想要的没有一张卡片，没有图像。但是，把树变大，从而使巢穴变深，会破坏一切，我不明白为什么

以下是简单的代码片段和结果：

<Container className={classes.cardGrid} maxWidth="xl">
    <Grid
        container
        direction="row"
        justify="space-evenly"
        alignItems="stretch"
        spacing={2}
    >
        {
            toiletOverviews.map(data => (
                <Grid item
                      key={`GridItem-${data.id}`} xs={12} sm={6} md={4} lg={2} xl={1}
                >
                    <Box
                        display="flex"
                        flexDirection="column"
                        style={{height: '100%', backgroundColor: 'purple'}}
                    >
                        <Typography
                            variant="h5"
                            style={{flex:1, backgroundColor: blue[800]}}
                        >
                            {data.title}
                        </Typography>
                        <Typography
                            style={{backgroundColor: blue[600]}}
                        >
                            Some text
                        </Typography>
                        <Typography
                            style={{backgroundColor: blue[400]}}
                        >
                            Some other text
                        </Typography>
                    </Box>
                </Grid>
            ))
        }
    </Grid>
</Container>

{
ToileToOverviews.map（数据=>(
{data.title}
一些文本
其他一些文本
))
}

---

我想出来了！我不知道的重要部分是

display:“flex”

仅应用于当前元素及其直接子元素。对于其子代中的子代，不适用

现在的解决方案是将其正确应用于所有必要的元素。副作用是图像不再显示。它的宽度/高度为零。这里的修复方法是向CardMedia元素添加

宽度：“100%”