商品卡片Flex布局异常：无法自动横向换行问题求助

问题根源 #

你的代码核心问题是HTML结构嵌套错误：.product-card-container在第5个商品卡片后被提前闭合（多了多余的</div>标签），导致第6到第9个.nft卡片不在flex容器内部，脱离了flex布局的控制，只能以默认的块级元素方式纵向排列。

修复步骤 #

1. 修正HTML结构 #

将所有.nft卡片统一包裹在同一个.product-card-container内部，删除多余的闭合标签。正确结构示例：

<div class="product-card-container">
  <!-- 第1个卡片 -->
  <div class="nft" onclick="addProd('11', products)" class="card">
    <div class='main'>
      <img class='tokenImage' src="{{ url_for('static', filename='img/XXX.jpg') }}" alt="NFT" />
      <h2>Корзинка</h2>
      <p class='description'>XXX.</p>
    </div>
  </div>
  <!-- 第2个卡片 -->
  <div class="nft" onclick="addProd('11', products)" class="card">
    <div class='main'>
      <img class='tokenImage' src="{{ url_for('static', filename='img/XXX.jpg') }}" alt="NFT" />
      <h2>Корзинка</h2>
      <p class='description'>XXX.</p>
    </div>
  </div>
  <!-- 第3-9个卡片依次放入，确保都在.product-card-container内部 -->
  <div class="nft" onclick="addProd('11', products)" class="card">...</div>
  <div class="nft" onclick="addProd('11', products)" class="card">...</div>
  <div class="nft" onclick="addProd('11', products)" class="card">...</div>
  <div class="nft" onclick="addProd('11', products)" class="card">...</div>
  <div class="nft" onclick="addProd('11', products)" class="card">...</div>
  <div class="nft" onclick="addProd('11', products)" class="card">...</div>
</div>

2. 优化CSS增强排版稳定性（可选） #

当前flex容器设置已正确，可补充属性避免排版异常：

.product-card-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 2rem; /* 用gap替代margin，解决换行时的间距冲突 */
  padding: 1rem; /* 避免卡片贴容器边缘 */
}

.nft {
  user-select: none;
  width: 300px;
  flex-shrink: 0; /* 防止卡片被挤压变形 */
  /* 保留原有样式... */
}

效果验证 #

修正结构后，所有卡片会在flex容器内遵循flex-wrap: wrap规则，空间不足时自动换行，保持横向排列逻辑，不会再出现纵向排列问题。

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