如何使Flex布局中的四张图片保持相同高度？

我有四张图片，想要实现左右两列的错落排版：左列上方是一张高图，下方是一张矮图；右列上方是一张矮图，下方是一张高图，整体上下对齐。但当前用flex写的代码效果不符合预期。

当前代码 #

HTML #

<div class="gallery">
  <div class="flex-item-40">
    <img src="./images/coast.jpg" alt="" />
  </div>
  <div class="flex-item-60">
    <img src="./images/island.jpg" alt="" />
  </div>
  <div class="flex-item-60">
    <img src="./images/balloon.jpg" alt="" />
  </div>
  <div class="flex-item-40">
    <img src="./images/mountain.jpg" alt="" />
  </div>
</div>

CSS #

.gallery {
  display: flex;
  flex-wrap: wrap;
}

.flex-item-40 {
  flex-basis: 40%;
}

.flex-item-60 {
  flex-basis: 60%;
}

问题原因 #

当前flex布局因为flex-wrap: wrap，第三张图会被挤到下一行，没法形成左右两列上下对应的错落结构；另外没有设置图片的缩放规则，导致图片比例混乱，排版错位。

解决方法 #

方法一：用CSS Grid实现（推荐） #

Grid布局可以直接通过行列跨度控制元素位置，适配现有HTML结构只需修改CSS：

.gallery {
  display: grid;
  grid-template-columns: 40% 60%; /* 定义两列宽度 */
  height: 600px; /* 可根据需求设置整体高度，或让内容自动撑开 */
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，裁剪多余部分，避免变形 */
}

/* 控制每个元素的行跨度 */
.flex-item-40:first-of-type {
  grid-row: span 2; /* 左上图占2行高度 */
}
.flex-item-60:first-of-type {
  grid-row: span 1; /* 右上图占1行高度 */
}
.flex-item-60:last-of-type {
  grid-row: span 2; /* 右下图占2行高度 */
}
.flex-item-40:last-of-type {
  grid-row: span 1; /* 左下图占1行高度 */
}

方法二：调整Flex布局结构 #

把左右两列拆分成独立容器，确保上下元素对应：

修改后的HTML

<div class="gallery">
  <div class="column column-40">
    <div class="item tall">
      <img src="./images/coast.jpg" alt="" />
    </div>
    <div class="item short">
      <img src="./images/mountain.jpg" alt="" />
    </div>
  </div>
  <div class="column column-60">
    <div class="item short">
      <img src="./images/island.jpg" alt="" />
    </div>
    <div class="item tall">
      <img src="./images/balloon.jpg" alt="" />
    </div>
  </div>
</div>

对应的CSS

.gallery {
  display: flex;
  width: 100%;
  height: 600px; /* 设置整体高度 */
}

.column {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.column-40 {
  flex-basis: 40%;
}

.column-60 {
  flex-basis: 60%;
}

.item {
  width: 100%;
}

.tall {
  flex: 2; /* 高图占2份高度 */
}

.short {
  flex: 1; /* 矮图占1份高度 */
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例 */
}

两种方法都能实现目标排版，Grid方式代码更简洁，无需调整HTML结构；Flex方式通过拆分容器也能精准控制上下元素的对应关系。object-fit: cover可根据需求替换为contain（显示完整图片，可能留空白）或其他属性。

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