flex-direction设为column时，如何实现移动端等高卡片？

架构老林

2026-7-16

解决移动端卡片高度不一致问题

你当前的CSS采用了flex-direction: column的垂直Flex布局，这种布局下flex-wrap: wrap会将元素按列换行，而flex-grow:1无法让所有卡片获得统一高度——因为容器没有明确的高度基准，且不同列的高度由各自列内最高元素决定，自然会出现卡片高度不一的情况。

以下是两种可行的解决方案：

方案1：改用横向Flex布局（Flexbox）

将列表改为横向排列的Flex布局，配合卡片内部的垂直Flex结构，确保所有卡片高度一致：

ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* 可选，添加卡片间距 */
  padding: 0;
  list-style: none;
}

ul li {
  flex: 1 1 calc(33.333% - 1rem); /* 移动端3列布局，减去间距占比 */
  border: 1px solid #000;
  display: flex;
  flex-direction: column; /* 卡片内部垂直排列 */
}

/* 固定图片高度，避免图片尺寸差异影响卡片高度 */
ul li img {
  width: 100%;
  height: 180px;
  object-fit: cover; /* 保持图片比例，裁剪超出部分 */
}

/* 文本区域自动填充卡片剩余空间 */
ul li .card-content {
  flex-grow: 1;
  padding: 1rem;
}

方案2：使用CSS Grid布局（更简洁）

Grid布局天然支持所有单元格等高，是实现卡片统一高度的最优选择：

ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 自动适配列数，最小卡片宽度250px */
  gap: 1rem;
  padding: 0;
  list-style: none;
}

ul li {
  border: 1px solid #000;
  display: flex;
  flex-direction: column;
}

ul li img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

ul li .card-content {
  flex-grow: 1;
  padding: 1rem;
}