设置display:flex后无法横向排列换行的问题排查与解决

Hey there! Let's break down why your flex layout isn't arranging items horizontally or wrapping as expected, plus fix it up for you:

核心问题 #

• Flex容器结构错误：你把每个ref__square单独放在一个.row01容器里，每个容器只有一个子元素，flexbox自然没法实现多元素横向排列和换行——flex布局是针对容器的直接子元素生效的，所有要排列的方块必须放在同一个flex父容器下。
• 冗余的包裹元素：每个.row01还被<a>标签单独包裹，这直接把布局拆成了独立的区块，破坏了整体排列的逻辑。
• 无效CSS属性：overflow: none不是合法取值（正确选项是visible/hidden/scroll等），虽然这不会直接影响flex布局，但属于语法错误。

修正后的代码 #

更新后的HTML #

我们把所有ref__square放到同一个.row01容器中，同时将<a>标签改为包裹单个方块，既保留点击功能又不破坏布局：

<div class="header">
  <div class="header__center">
    <!-- 单个flex容器承载所有方块 -->
    <div class="row01">
      <a target="_blank" href="http://g4skins.com/ref/DDVX">
        <div class="ref__square">
          <div class="ref__logo-container">
            <img src="g4.webp" class="ref__image">
          </div>
          <div class="ref__information">
            <p class="ref__link">g4skins.com</p>
            <p class="ref__code">Code: DDVX</p>
            <p class="ref__prize">Free cash</p>
          </div>
        </div>
      </a>
      <a target="_blank" href="https://csgopolygon.com">
        <div class="ref__square">
          <div class="ref__logo-container">
            <img src="csgopolygon.png" class="ref__image">
          </div>
          <div class="ref__information">
            <p class="ref__link">csgopolygon.com</p>
            <p class="ref__code">Code: chudy69</p>
            <p class="ref__prize">Free cash</p>
          </div>
        </div>
      </a>
      <!-- 可以在这里继续添加更多方块 -->
    </div>
  </div>
</div>

更新后的CSS #

为.row01添加flex-wrap: wrap开启换行功能，同时修正无效的overflow属性：

.header { width: 100%; height: auto; margin: auto; }
.header .header__center { width: 90%; height: 100%; margin: auto; }
.header .header__center .row { width: 100%; height: auto; text-align: center; }
.header .header__center .row .header__bussword-text { font-size: 45px; color: #353535; padding-top: 40px; padding-bottom: 30px; }
/* 修正后的flex容器样式 */
.header .header__center .row01 { 
  width: 90%; 
  display: flex; 
  flex-wrap: wrap; /* 新增：开启换行 */
  margin: auto; 
  overflow: visible; /* 修正无效属性 */
  gap: 5px; /* 可选：用gap替代子元素margin，实现更整洁的间距 */
}
.header .header__center .row01 .ref__square { 
  width: 150px; 
  height: 180px; 
  background: #fff; 
  border: 1px solid #ff3b49; 
  position: relative; 
  /* 如果用了容器的gap，可以删掉这里的margin */
  /* margin: 5px; */
}
.header .header__center .row01 .ref__square:nth-child(1):before { content: ''; position: absolute; width: 100%; height: 100%; background: url("fluid.png") no-repeat; background-size: 190%; background-position: center; opacity: .7; }
.header .header__center .row01 .ref__square .ref__logo-container { width: 100%; height: 80px; position: absolute; top: 0; }
.header .header__center .row01 .ref__square .ref__logo-container .ref__image { max-width: 80%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
.header .header__center .row01 .ref__square .ref__information { width: 100%; height: 80px; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; }
.header .header__center .row01 .ref__square .ref__information .ref__link { color: #050505; }
.header .header__center .row01 .ref__square .ref__information .ref__code { font-weight: 600; }

关键修复总结 #

1. 所有ref__square共享同一个.row01flex容器，让flexbox可以正常排列子元素；
2. 添加flex-wrap: wrap实现宽度不足时的自动换行；
3. 重构<a>标签的位置，既保留单个方块的点击功能，又不破坏整体布局；
4. 修正无效的overflow属性，优化代码规范性；
5. 可选：用flex容器的gap属性替代子元素的margin，让间距控制更简洁统一。

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