如何在Vue中实现多个票证卡片组件的等高布局效果？

解决方案 #

你当前的代码只设置了外层容器为flex布局、列占比，但没有处理列内部元素的高度继承和卡片内部的空间分配，按下面步骤调整即可：

1. 修改现有外层CSS

.all-tickets {
    display: flex;
    width: 100%;
    flex-wrap: wrap; /* 适配响应式换行，避免小屏下列被挤压变形 */
    align-items: stretch; /* 核心属性：强制所有子列高度统一为当前行最高列的高度 */
}

.all-tickets .single-ticket-col {
    flex: 1 1 25%; /* 对应你原有的col-lg-3占比，可根据响应式断点调整基础宽度 */
    display: flex; /* 让列本身也成为flex容器，内部卡片可以自动占满列高度 */
    margin-bottom: 20px; /* 给行之间加间距，避免上下行卡片贴在一起 */
}

2. 新增卡片高度适配CSS

/* 让卡片占满列的全部宽度和高度 */
.all-tickets .single-ticket {
    width: 100%;
    display: flex;
}

/* 卡片本身用垂直flex布局，方便分配上下区域空间 */
.all-tickets .widget[type="ticket"] {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* 核心属性：让卡片上半部分的内容区域自动撑开剩余高度，保证底部按钮统一对齐在卡片底部 */
.all-tickets .widget .top {
    flex-grow: 1;
}

可选优化（内容过多时限制高度）

如果希望所有卡片高度完全固定，不随内容多少变化，可以额外加以下样式：

.all-tickets .widget[type="ticket"] {
    max-height: 600px; /* 按需调整最大高度数值 */
}
.all-tickets .widget .event {
    overflow-y: auto;
    padding-right: 4px; /* 给滚动条留位置，避免内容被遮挡 */
}

调整后内容超过高度限制时，中间的票种信息区域会出现滚动条，不会撑破卡片高度。

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