基于Flexbox的卡片网格：缩放时保持容器子元素比例及模块化

嘿，这个需求完全可以用CSS实现，我来给你拆解一下思路和具体代码——刚好我之前做过类似的Flex卡片网格，踩过一些坑，分享给你：

核心思路 #

你的需求有两个关键：Flex布局下的宽度规则（无图50%、带图100%、单张无图100%），以及卡片内容比例锁定。我们可以通过「Flex基础属性+padding百分比比例法+BEM模块化命名」来实现，解决子元素比例失效的问题。

具体实现步骤 #

1. 基础HTML结构（模块化） #

用BEM命名法区分不同类型的卡片，方便后续维护：

<div class="card-grid">
  <!-- 无图卡片 -->
  <div class="card card--no-img">
    <div class="card__ratio card__ratio--4-3"></div>
    <div class="card__content">
      <h3>无图卡片1</h3>
      <p>这是无图卡片的内容</p>
    </div>
  </div>
  <div class="card card--no-img">
    <div class="card__ratio card__ratio--4-3"></div>
    <div class="card__content">
      <h3>无图卡片2</h3>
      <p>这是无图卡片的内容</p>
    </div>
  </div>
  <!-- 带图卡片 -->
  <div class="card card--with-img">
    <div class="card__ratio card__ratio--16-9">
      <img src="your-image.jpg" alt="卡片图片" class="card__img">
    </div>
    <div class="card__content">
      <h3>带图卡片</h3>
      <p>这是带图卡片的内容</p>
    </div>
  </div>
  <!-- 无配对的无图卡片 -->
  <div class="card card--no-img">
    <div class="card__ratio card__ratio--4-3"></div>
    <div class="card__content">
      <h3>单张无图卡片</h3>
      <p>这张会自动占满一行</p>
    </div>
  </div>
</div>

2. CSS核心代码 #

/* 网格容器：Flex基础布局 */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* 卡片间距，可自定义 */
  padding: 1rem;
}

/* 通用卡片样式：锁定基础行为 */
.card {
  flex-shrink: 0; /* 禁止卡片被压缩，保证宽度规则 */
  position: relative; /* 为比例容器的绝对定位提供参考 */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 无图卡片：默认50%宽度 */
.card--no-img {
  flex-basis: calc(50% - 0.5rem); /* 减去gap的一半，避免换行 */
}

/* 带图卡片：占满整行 */
.card--with-img {
  flex-basis: 100%;
}

/* 处理无配对的无图卡片：最后一张是奇数个无图卡片时，占满整行 */
.card--no-img:last-child:nth-child(odd) {
  flex-basis: 100%;
}

/* 比例容器：核心！用padding-top维持宽高比 */
.card__ratio {
  position: relative;
  width: 100%;
}

/* 4:3比例 */
.card__ratio--4-3 {
  padding-top: 75%; /* 3/4*100% */
}

/* 16:9比例 */
.card__ratio--16-9 {
  padding-top: 56.25%; /* 9/16*100% */
}

/* 内容容器：填充比例容器的空间 */
.card__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 带图卡片的图片：自适应比例 */
.card__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片保持比例，裁剪多余部分 */
}

关键细节解释 #

1. 为什么之前的比例代码失效？
   大概率是没有给卡片设置position: relative，或者内容容器没有用绝对定位填充比例容器的空间。上面的代码通过.card__ratio作为比例载体，.card__content绝对定位填充，确保内容跟着比例走。

2. 模块化的优势
   用BEM命名可以轻松扩展不同比例（比如1:1的卡片只需要加.card__ratio--1-1，设置padding-top:100%），或者修改卡片类型的宽度规则，不影响其他模块。

3. 无配对卡片的处理
   用:last-child:nth-child(odd)选择器精准匹配“最后一个是奇数位的无图卡片”，不需要JS就能实现自动占满一行的效果。

4. 缩放时的比例保持
   因为flex-basis是百分比，padding-top也是基于父元素宽度的百分比，所以无论窗口怎么缩放，卡片的宽高比都会严格保持，内容也会自适应填充。

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