CSS Flexbox技术问询：如何实现组件内容顶部对齐、按钮底部固定及容器等高

我来帮你搞定这个布局问题，正好适配你现有的HTML结构，只需要添加几行CSS就能实现需求：

核心思路 #

利用Flexbox的弹性空间分配特性，让卡片容器垂直布局，内容区域自动填充剩余空间，按钮区域通过margin-top: auto固定在底部，同时确保所有卡片占满父容器高度，实现高度统一。

具体CSS代码 #

/* 确保每个卡片容器占满父列高度，所有卡片高度一致 */
.counsellor-list-item {
  height: 100%;
}

/* 卡片核心容器设置垂直Flex布局 */
.state_chosen {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 内容区域自动填充剩余空间，把按钮挤到底部 */
.counsellor-list-item-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* 按钮容器自动上推到底部 */
.counsellor-list-item-content > div:last-child {
  margin-top: auto;
}

为什么这样有效？ #

• .counsellor-list-item和.state_chosen的height:100%确保所有卡片基于父网格列的高度渲染，自然实现高度一致；
• flex-direction: column让卡片内部元素垂直排列；
• flex-grow:1让.counsellor-list-item-content填充卡片除图片外的剩余空间，不管内部内容多长都能撑开；
• margin-top: auto是Flex的小技巧，会自动占据上方所有剩余空间，把按钮容器牢牢固定在底部。

你把这段CSS加到你的样式里，就能实现你想要的效果啦——不管每个卡片的内容长短，所有卡片高度对齐，按钮始终在底部。

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