在材料 ui 卡中将页脚与底部对齐（内部示例）

Question

我从material-ui端拿了卡片的例子，想把多张卡片排列成一个网格。所有的高度都相等（我使用 height:100% 实现了这一点）并且页脚位于卡片的底部。在这里，我尝试使用弹性列布局没有成功。仍然取决于卡片中文本的长度，页脚不会出现在底部。

我在以下代码示例中准备了问题：https://codesandbox.io/s/material-demo-forked-xijum?file=/index.js

谁能给我一个提示，我怎样才能设法在每张卡片的底部显示页脚？

Answer 1

在您的卡片元素中添加display:flex 和flexDirection: column。这会将card 内的所有内容设置在一列中。

 <Card className={classes.root} style={{ display: "flex", flexDirection: "column" }}>

现在 marginTop: auto 到 CardContent。这将在顶部添加自动边距。

<CardContent style={{ marginTop: "auto" }}>

这里的工作演示：https://codesandbox.io/s/material-demo-p23d0