如何通过css flexbox实现卡片等高
使用 Flexbox 可轻松实现卡片等高，只需将父容器设为 display: flex，子项会自动拉伸对齐。1. 基本结构中，card-container 作为弹性容器，card 为子项；2. 设置 display: flex 后，flex: 1 让卡片均分空间，gap 控制间距；3. 添加 flex-wrap 和媒体查询可实现响应式换行，不同屏幕下调整 flex-basis 控制每行列数；4. 核心在于 align-items: stretch 默认行为，使所有卡片高度与最高者一致，无需固定高度或 JS 计算，简洁高效且兼容性好。
ard 为子项；2. 设置 display: flex 后，flex: 1 让卡片均分空间，gap 控制间距；3. 添加 flex-wrap 和媒体查询可实现响应式换行，不同屏幕下调整 flex-basis 控制每行列数；4. 核心在于 align-items: stretch 默认行为，使所有卡片高度与最高者一致，无需固定高度或 JS 计算，简洁高效且兼容性好。使用 CSS Flexbox 实现卡片等高非常简单，关键是将父容器设置为 Flex 布局，子项（卡片）会自动拉伸到相同高度。
1. 基本结构
假设有如下 HTML 结构：
标题1
内容较短
标题2
这里的内容比较多，可能会让卡片变高，但 Flex 会自动处理高度一致。
标题3
中等长度内容。
2. 使用 Flexbox 设置等高卡片
只需给容器设置 display: flex，子元素默认就会在交叉轴上拉伸对齐，实现等高效果。
.card-container {display: flex;
gap: 16px; /* 可选：设置卡片间距 */
}
.card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
flex: 1; /* 可选：让卡片平均分配空间 */
}
这样，无论哪个卡片内容更多，所有卡片的高度都会和最高的那个保持一致。
3. 控制换行与响应式布局
如果希望在小屏幕上换行显示，可以加上 flex-wrap：
.card-container {display: flex;
flex-wrap: wrap;
gap: 16px;
}
再配合媒体查询控制每行数量：
@media (max-width: 768px) {.card {
flex-basis: calc(50% - 16px); /* 每行两个 */
}
}
@media (max-width: 480px) {
.card {
flex-basis: 100%; /* 每行一个 */
}
}
4. 关键点说明
- Flex 容器中的子项默认 align-items: stretch，这是实现等高的核心。
- 不需要给卡片设置固定高度或 JavaScript 计算。
- 内容区域会自然撑开整个卡片，视觉上高度一致。
- 若想取消拉伸，可设置 align-items: flex-start，但会失去等高效果。
基本上就这些。用 Flexbox 实现等高卡片简洁高效，兼容性好，适合大多数布局场景。不复杂但容易忽略。
