如何让card卡片的actions操作区域始终固定在卡片底部？

首选方案：Flex 布局实现（兼容性好、无内容重叠问题） #

你提供的代码已经给.card设置了flex-direction: column纵向弹性布局，只需要新增一行核心属性即可实现需求：

• 给.actions添加margin-top: auto：在纵向flex布局中，auto值的上外边距会自动占据元素上方所有剩余空间，直接将操作栏“挤”到卡片最底部
  如果需要所有卡片保持等高排列，再给外层容器.container添加align-items: stretch属性即可。

完整修改后的CSS代码： #

.container {
    display: flex;
    align-items: stretch; /* 等高排列可选属性 */
    margin: 0 20px;
 }
.card {
    display: flex;
    flex-direction: column;
    width: 320px;
    border: 1px solid grey;
    margin: 20px;
}
.title{
    padding: 20px;
}
.middle{
    padding: 20px;
}
.actions{
    text-align: center;
    margin-top: auto; /* 固定底部核心属性 */
    padding: 20px;
    width: 100%;
} 

备选方案：绝对定位实现 #

如果场景不适合用flex方案，可以用绝对定位，缺点是内容过长时会和操作栏重叠，需要额外处理内容区滚动：

• 给.card添加position: relative
• 给.actions添加如下属性：

.actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 20px;
    background: #fff; /* 避免下层内容透上来 */
}
/* 同时需要给卡片顶部内容区域加底部内边距，避免被操作栏遮挡 */
.card {
    padding-bottom: 80px; /* 数值和actions的高度保持一致即可 */
}

内容的提问来源于stack exchange，提问作者Cristian Muscalu