Flexbox布局div响应式异常：中间居中div被左侧元素挤压偏移如何解决

架构老林

2026-9-28

解决方案

核心思路

问题根源在于flex布局默认开启了元素收缩规则（flex-shrink: 1），且justify-content: space-between在空间不足时会优先压缩元素间距，导致中间块被挤压偏移。我们可以改用grid布局实现需求：既保留宽屏状态下左块靠左、右块靠右、中间块居中的效果，窄屏时左右块分别向两侧溢出隐藏，中间块始终保持居中。

完整修改代码

CSS代码

main {
  margin-top: 200px;
  display: grid;
  /* 左右列占剩余自适应空间，中间列固定250px */
  grid-template-columns: 1fr 250px 1fr;
  /* 裁剪横向超出的内容，不需要可替换为auto来显示横向滚动条 */
  overflow-x: clip;
}

#left {
  /* 左块始终贴左列左侧 */
  justify-self: start;
  width: 250px;
  height: 250px;
  background-color: blue;
  transform: translateX(-50px);
  animation: bounce_left 6s ease-in-out infinite;
}

#center {
  /* 中间块始终居中 */
  justify-self: center;
  width: 250px;
  height: 250px;
  background-color: red;
  /* 可选：设置z-index让中间块覆盖在左右块上方 */
  z-index: 1;
  position: relative;
}

#right {
  /* 右块始终贴右列右侧 */
  justify-self: end;
  width: 250px;
  height: 250px;
  background-color: green;
  animation: bounce_right 6s ease-in-out infinite;
}

@keyframes bounce_left {
    0% {transform: translateX(-50px);}
    50% {transform: translateX(0px);}
    100% {transform: translateX(-50px);}
}
@keyframes bounce_right {
    0% {transform: translateX(50px);}
    50% {transform: translateX(0px);}
    100% {transform: translateX(50px);}
}