如何使 Material-UI CardActions 始终粘在父级的底部答案

【问题标题】：How to make Material-UI CardActions always stick to the bottom of parent如何使 Material-UI CardActions 始终粘在父级的底部
【发布时间】：2020-01-09 03:22:56
【问题描述】：

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

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

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

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

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

【问题讨论】：

请查看下面的答案！

标签： reactjs material-ui

【解决方案1】：

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

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。

【讨论】：

【解决方案2】：

您必须将以下属性添加到.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;
}

【讨论】：