如何创建图片等高且间距(gutter)自适应的Flexbox网格？

问题说明 #

我要做一个Flexbox网格，要求图片高度一致、间距能随图片尺寸自适应。之前给图片设固定高度，加文本后文本没法自动换行；无文本时能实现瀑布流效果，加文本后图片旁会出现空白。

效果对比 #

• 期望效果：
• 无文本正常效果：
• 有文本的问题效果：

当前代码 #

HTML #

<div class="collection-list">
  <div class="collection-item">
    <img src="url" class="image">
    <div class="text-block">Image text</div>
  </div>
  <div class="collection-item">
    <img src="url" class="image">
    <div class="text-block">Image text</div>
  </div>
  <div class="collection-item">
    <img src="url" class="image">
    <div class="text-block">Image text</div>
  </div>
  <div class="collection-item">
    <img src="url" class="image">
    <div class="text-block">Image text</div>
  </div>
</div>

CSS #

.collection-list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
}

.collection-item {
  display: flex;
  height: 10vw;
  flex-direction: column;
  align-items: flex-start;
}

.image {
  height: 80%;
}

解决办法 #

核心问题是给.collection-item设了固定高度，把文本的空间挤没了。修改方案如下：

修改后的CSS #

.collection-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem; /* 用gap统一控制间距，自适应更稳定 */
}

.collection-item {
  display: flex;
  flex-direction: column;
  flex: 1 1 calc(25% - 1rem); /* 每行4个卡片，自动分配宽度 */
  min-width: 200px; /* 防止屏幕过窄时卡片太挤 */
}

.image {
  width: 100%;
  height: 200px; /* 固定图片高度，保证一致 */
  object-fit: cover; /* 图片不变形，裁剪多余部分 */
}

.text-block {
  margin-top: 0.5rem;
  word-wrap: break-word; /* 强制文本换行 */
}

关键调整点 #

1. 删掉.collection-item的固定height:10vw，让卡片高度由内容撑开，文本自然有换行空间
2. 用flex:1 1 calc(25% -1rem)控制卡片宽度，每行刚好4个，gap代替justify-content:space-between，避免最后一行对齐问题
3. object-fit:cover保证固定高度的图片不拉伸变形，视觉更统一
4. 加min-width做响应式兜底，小屏幕也有良好显示

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