Flex布局下页面缩放时卡片间距设置与overflow-x横向滚动失效问题咨询

嘿，我来帮你搞定这两个Flex布局的问题！咱们一个一个来解决：

问题1：横向滚动不生效的修复 #

你现在用了Bootstrap的.row和.col-3，但这两个类的默认属性刚好阻碍了横向滚动：

• Bootstrap的.row默认是flex-wrap: wrap，会让卡片自动换行；
• .col-3是基于百分比的宽度（占父容器25%），卡片会被强制压缩适配宽度，没法横向溢出。

咱们这样改：

1. 给你的.overflow_x容器（也就是那个row）添加关键样式，强制不换行并启用横向滚动：

.overflow_x {
  overflow-x: auto;
  flex-wrap: nowrap; /* 核心：禁止卡片换行 */
  gap: 1rem; /* 顺便提前解决间距问题 */
  padding: 0 0.5rem; /* 可选：避免卡片贴住容器边缘 */
}

2. 替换掉.col-3类，换成自定义的.footer-card，并设置禁止压缩：

<!-- 把所有的col-3替换成footer-card -->
<div class="footer-card">
  <ul>...</ul>
</div>

.footer-card {
  flex-shrink: 0; /* 核心：禁止卡片被压缩 */
  width: 13rem; /* 和你ul的宽度保持一致 */
}

这样卡片就会强制横向排列，超出容器宽度的部分就会触发滚动条了！

问题2：页面缩放时的卡片间距 #

刚才在.overflow_x里加的gap: 1rem就是最优解！gap是Flex布局的原生属性，它会在flex子元素之间创建均匀的间距，不管页面怎么缩放，间距都能保持一致，比用margin更可靠（不会出现首尾卡片边距异常的问题）。

如果需要适配不同屏幕尺寸，还可以用媒体查询调整间距：

@media (max-width: 768px) {
  .overflow_x {
    gap: 0.5rem; /* 小屏幕缩小间距 */
  }
}

完整修改后的核心代码片段 #

HTML部分（替换col-3）： #

<div class="section-footer">
  <div class="container-fluid center-space">
    <div class="row overflow_x">
      <div class="footer-card">
        <ul>
          <li><h6>Scopri Deliveroo</h6></li>
          <li><a href="#">Chi siamo</a></li>
          <!-- 其他列表项保持不变 -->
        </ul>
      </div>
      <!-- 另外三个卡片同理替换为footer-card -->
      <div class="footer-card">...</div>
      <div class="footer-card">...</div>
      <div class="footer-card">...</div>
    </div>
    <div class="bottom-footer d-flex justify-content-between">...</div>
  </div>
</div>

SCSS部分（更新样式）： #

$color-li : white;
.section-footer{
  overflow-x:hidden;
  background-color: #2e3333;
  width: 100%;
  height: 22rem;
  
  .overflow_x{
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 1rem;
    padding: 0 0.5rem;
  }
  
  .footer-card {
    flex-shrink: 0;
    width: 13rem;
  }
  
  ul{
    min-width:10rem;
    width: 100%; /* 改成100%继承父容器宽度 */
    border-radius: 5px;
    margin: 2rem 0;
    background-color: #434848;
    padding: 15px;
    height: 80%;
    /* 原有ul样式保持不变 */
  }
  
  /* 原有bottom-footer样式保持不变 */
}

额外小技巧 #

如果觉得默认滚动条不好看，可以自定义样式：

.overflow_x::-webkit-scrollbar {
  height: 6px;
}
.overflow_x::-webkit-scrollbar-track {
  background: #434848;
  border-radius: 3px;
}
.overflow_x::-webkit-scrollbar-thumb {
  background: teal;
  border-radius: 3px;
}

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