如何让section内的三张商品卡片整齐有序排列？

当前商品卡片始终左对齐，需要调整为整齐有序的排列以提升视觉效果。尝试使用flex属性后元素变为垂直排列，体验不佳，请问是否有方法让三张卡片整齐有序展示？

原代码片段 #

CSS代码 #

.product-container
{
  padding-right:10vw;
  display: inline-block;
  overflow-x: auto;
  scroll-behavior: smooth; 
}
.product-container::-webkit-scrollbar{
  display: none;
}
.products{
  padding: 0 10vw;
}
.product-card{
  flex: 0 0 auto;
  width: 196px;
  height: 600px; 
  margin-right: 40px;
}
.product-image{
  position: relative;
  width: 196px;
  height: 350px; 
  overflow: hidden;
  
}
.product-thumb{
  width:196px;
  height:350px;
  object-fit: cover;
}

HTML代码 #

<section class="products">
            <div class="product-container">
              <div class="product-card">
                  <div class="product-image">
                      <img src="images/card2.jpg" alt="" class="product-thumb" height="350px" width="220px">
                      <button class="addtocartbtn"> Add To Cart </button>
                  </div>
                  <div class="shoe-specs">
                    <span class="disprice">$59</span><span class="orgprice">$99</span>
                    <h2 class="brand">Adidas</h2>
                    <p class="spec">Running Shoes</p>
                    
                  </div>
              </div>
            </div>
            <div class="product-container">
              <div class="product-card">
                  <div class="product-image">
                      <img src="images/card4.jpg" alt="" class="product-thumb" height="350px" width="220px">
                      <button class="addtocartbtn"> Add To Cart </button>
                  </div>
                  <div class="shoe-specs">
                    <span class="disprice">$69</span><span class="orgprice">$129</span>
                    <h2 class="brand">Reebok</h2>
                    <p class="spec">Running Shoes</p>
                    
                  </div>
              </div>
            </div>
            <div class="product-container">
              <div class="product-card">
                  <div class="product-image">
                      <img src="images/card5.jpg" alt="" class="product-thumb" height="350px" width="220px">
                      <button class="addtocartbtn"> Add To Cart </button>
                  </div>
                  <div class="shoe-specs">
                    <span class="disprice">$89</span><span class="orgprice">$149</span>
                    <h2 class="brand">Nike</h2>
                    <p class="spec">Running Shoes</p>
                    
                  </div>
              </div>
            </div>
</section>

解决方法 #

核心问题是HTML结构不合理，每个product-card被单独包裹在product-container中，导致flex布局无法作用于所有卡片。调整方案如下：

修改后的HTML结构 #

<section class="products">
  <div class="product-container">
    <!-- 卡片1 -->
    <div class="product-card">
        <div class="product-image">
            <img src="images/card2.jpg" alt="" class="product-thumb" height="350px" width="220px">
            <button class="addtocartbtn"> Add To Cart </button>
        </div>
        <div class="shoe-specs">
          <span class="disprice">$59</span><span class="orgprice">$99</span>
          <h2 class="brand">Adidas</h2>
          <p class="spec">Running Shoes</p>
        </div>
    </div>
    <!-- 卡片2 -->
    <div class="product-card">
        <div class="product-image">
            <img src="images/card4.jpg" alt="" class="product-thumb" height="350px" width="220px">
            <button class="addtocartbtn"> Add To Cart </button>
        </div>
        <div class="shoe-specs">
          <span class="disprice">$69</span><span class="orgprice">$129</span>
          <h2 class="brand">Reebok</h2>
          <p class="spec">Running Shoes</p>
        </div>
    </div>
    <!-- 卡片3 -->
    <div class="product-card">
        <div class="product-image">
            <img src="images/card5.jpg" alt="" class="product-thumb" height="350px" width="220px">
            <button class="addtocartbtn"> Add To Cart </button>
        </div>
        <div class="shoe-specs">
          <span class="disprice">$89</span><span class="orgprice">$149</span>
          <h2 class="brand">Nike</h2>
          <p class="spec">Running Shoes</p>
        </div>
    </div>
  </div>
</section>

修改后的CSS代码 #

.product-container {
  padding: 0 10vw;
  display: flex; /* 启用flex横向布局 */
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 40px; /* 替代margin-right，统一控制卡片间距 */
}
.product-container::-webkit-scrollbar {
  display: none;
}
.products {
  padding: 0; /* 移除重复内边距，避免布局混乱 */
}
.product-card {
  flex: 0 0 auto; /* 固定卡片宽度，不拉伸不收缩 */
  width: 196px;
  height: 600px;
}
.product-image {
  position: relative;
  width: 196px;
  height: 350px;
  overflow: hidden;
}
.product-thumb {
  width: 196px;
  height: 350px;
  object-fit: cover;
}

关键调整说明 #

• 将所有product-card合并到同一个product-container中，让flex布局能同时作用于所有卡片
• 给product-container设置display: flex，默认横向排列卡片，不会出现垂直堆叠问题
• 用gap属性替代product-card的margin-right，避免最后一张卡片出现多余右侧间距
• 清理重复的padding设置，优化布局间距逻辑

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