求助：CSS Flexbox实现背景重复的响应式页脚存在间距问题

我来帮你搞定这个页脚布局的问题！你想要的是中间为图片、两侧用重复背景填充的响应式三部分页脚，目前遇到的额外间距和flex-shrink无效的问题，主要是flex布局的属性设置没到位，咱们一步步来调整：

问题分析 #

你当前的结构里，三个<span>元素默认是inline类型，而且父容器没有设置合适的flex属性，导致无法自动填充剩余空间。flex-shrink无效是因为它的作用是空间不足时收缩元素，但你现在的问题是空间有余时元素没填满，所以得换用flex-grow来让两侧元素自动拉伸填充剩余宽度。

解决方案代码 #

首先调整HTML结构（给父容器加个类方便样式控制），然后设置对应的CSS：

<div class="footer-container">
  <span class="side"></span>
  <span class="middle">
    <img src="你的中间图片地址" alt="中间图片">
  </span>
  <span class="side"></span>
</div>

.footer-container {
  display: flex;
  width: 100%; /* 让容器占满可用宽度 */
  height: 80px; /* 根据你的需求设置页脚高度 */
}

.side {
  flex: 1; /* 等价于 flex-grow:1, flex-shrink:1, flex-basis:auto */
  background: url("你的侧边重复背景图") repeat;
  /* 确保背景填充整个元素高度 */
  background-size: auto 100%;
}

.middle {
  /* 让中间元素根据图片宽度自适应，不抢占额外空间 */
  flex-shrink: 1;
  flex-grow: 0;
}

.middle img {
  max-width: 100%; /* 让图片在小屏幕上自动缩小，保证响应式 */
  height: 100%; /* 图片高度匹配页脚高度 */
  object-fit: contain; /* 保持图片比例，避免拉伸变形 */
}

关键说明 #

• flex:1 给两侧元素：这个属性会让.side自动平分父容器的剩余空间，同时在屏幕变窄时自动收缩，完美解决响应式和额外间距问题。
• 中间图片的响应式处理：给<img>设置max-width:100%和object-fit:contain，确保图片在不同屏幕尺寸下都能保持比例，不会溢出或变形。
• 父容器的宽度设置：width:100%让页脚占满整个屏幕宽度，避免出现左右留白。

这样调整后，你的页脚就会变成中间图片自适应、两侧背景自动填充剩余空间的响应式布局啦！

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