如何使用Flexbox实现图片的2×2横竖并排布局？

你的问题核心是没有给存放图片的article元素设置Flex容器属性——当前Flex规则只作用在section上，而figure是article的子元素，自然不会按你想要的方式排列。下面是修改后的代码和说明：

修改后的CSS代码 #

section {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: space-between;
}

article {
  flex: 200;
}

.upgrades {
  flex: 100;
  /* 关键：让article成为Flex容器，子元素可换行 */
  display: flex;
  flex-wrap: wrap;
  /* 控制元素间间距，替代margin更便捷 */
  gap: 10px;
  padding: 5px;
}

.reviews {
  align-self: flex-end;
}

figure {
  background-color: #3482D5;
  /* 去掉固定高度，避免压缩图片 */
  /* height: 80px; */
  display: flex;
  flex-direction: column;
  /* 每个元素占容器一半宽度，减去gap的一半空间 */
  flex: 0 1 calc(50% - 5px);
  margin: 0;
  padding: 5px;
  align-items: center;
  text-align: center;
}

/* 让图片自适应容器，避免溢出 */
figure img {
  max-width: 100%;
  height: auto;
}

修改后的HTML代码（结构无需调整） #

<article class="upgrades">
  <h3>Delorean Upgrades</h3>
  <figure>
    <img src="https://placekitten.com/200/300" alt="bumper_sticker">
    <figcaption>Flux Capacitor</figcaption>
  </figure>
  <figure>
    <img src="https://placekitten.com/201/301" alt="flame">
    <figcaption>Flame Decals</figcaption>
  </figure>
  <figure>
    <img src="https://placekitten.com/202/302" alt="flux cap">
    <figcaption>Bumper Stickers</figcaption>
  </figure>
  <figure>
    <img src="https://placekitten.com/203/303" alt="hub cap">
    <figcaption>Hub Caps</figcaption>
  </figure>
</article>

核心修改说明 #

• 给.upgrades添加display: flex和flex-wrap: wrap，让它成为真正的Flex容器，子元素figure才能自动换行。
• 用flex: 0 1 calc(50% - 5px)精准控制每个figure的宽度，确保一行刚好放下两个（减去gap的一半空间）。
• 调整figure内部为垂直布局（flex-direction: column），让图片和figcaption的排版更合理。
• 去掉固定height并设置图片自适应，避免图片被压缩变形。

内容的提问来源于stack exchange，提问作者Nana Kwame Dickson