如何使Material-UI CardAction始终紧贴父级的底部

Question

第二张Material-UI卡的蓝色CardActions部分没有停留在底部，这使页面看起来不简洁。

我已经尝试将CardContent的高度设置为100％，但没有任何改变。

我创建了一个沙箱来说明问题：

https://codesandbox.io/s/happy-glitter-7vyep

我希望Material-UI CardAction始终位于容器的底部，无论CardContent中有多少个项目。

Answer 1

您必须将以下属性添加到.MuiCard-root

.MuiCard-root{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Other Method is :

.MuiCard-root{
  display: flex;
  flex-direction: column;
}
.MuiCardActions-root{
   margin-top: auto;
}

Answer 2

接受的答案将使卡片中的内容居中。这通常会导致不希望的对齐问题。相反，如果您希望 CardContent 保持 CardHeader 下方的正常间距，并将操作“推”到卡片底部，这种方式效果更好。

CSS

.MuiCard-root{
  display: flex;
  flex-direction: column;
}

卡片

<Card>
    <CardHeader>...</CardHeader>
    <CardContent>...></CardContent>
    <div className={"flex-grow"} />
    <CardActions>...</CardActions>
</Card>

请注意，此示例使用带有“flex-grow”属性的 tailwindcss。如果您不使用顺风，只需确保 div 应用了 flex-grow:1。