如何修复Flexbox布局的居中、换行及间距失效问题？

问题根源 #

1. .wrapper 默认 flex-direction: row，导致多个 .row 横向排列无法换行，无法实现最后一张图单独占一行的需求
2. .column 未设置 display: flex，gap 属性无法生效
3. 原HTML结构拆分多个.row，增加布局复杂度，且未利用Flex的自动换行特性

修改后的代码实现 #

CSS代码

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 20px;
  padding: 20px 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  width: 924px;
  gap: 20px;
  justify-content: center;
}

.column {
  display: flex;
  flex: 0 0 452px;
}

.column img {
  width: 100%;
  height: auto;
}

HTML代码

<div class="wrapper">
  <div class="row">
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/26a76fb4-c0c9-1296-36dd-a0adcfd0da11.jpg" alt="图片1"></div>
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/2bdc1eb0-300a-9f18-273a-1939c3a1a20a.jpg" alt="图片2"></div>
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/db72e41d-c338-08d3-d0ee-782dd31791d6.jpg" alt="图片3"></div>
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/74b818c5-f67c-540f-c724-b6a71fcad0db.jpg" alt="图片4"></div>
  </div>
  <div class="row">
    <div class="column"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/ce6173d9-ed33-0d23-bed7-ce1fa03db6b6.jpg" alt="图片5"></div>
  </div>
</div>

关键调整说明 #

• 将前4张图片合并到单个.row中，通过flex-wrap: wrap自动实现2列2行布局，简化结构
• .wrapper设置flex-direction: column，确保每个.row垂直排列并通过align-items: center水平居中
• 给.column添加display: flex，解决gap不生效问题；固定宽度保证图片布局稳定
• 图片设置width: 100%自适应容器，避免固定尺寸导致的溢出问题

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