求助：Flexbox布局实现图片自适应屏幕并固定间距

架构老林

2026-8-6

解决方案

问题分析

原代码的核心问题：

固定gap:30px无法实现屏幕自适应的5%间距
仅给中间容器设置固定宽度，左右容器未定义尺寸，导致布局失衡
justify-content: space-between会额外分配空白，不符合首尾贴边的需求

修改后的代码

CSS部分

.three-main {
  height: 100%;
  background-color: #000;
  width: 100%;
  padding-bottom: 100px;
}

.three-child {
  display: flex;
  /* 设为5%的间距，自适应屏幕宽度 */
  gap: 5%;
  align-items: center;
  /* 清除默认内外边距，确保首尾图片贴合浏览器边缘 */
  margin: 0;
  padding: 0;
}

/* 给三个容器分配flex比例，配合间距让总宽度刚好占满屏幕 */
.three-one, .three-three {
  flex: 1;
}

.three-two {
  flex: 1.8;
  height: 600px;
}

.three-two img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

.three-one img,
.three-two img,
.three-three img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #000;
  opacity: 0.51;
}

.three-one img {
  border-radius: 0 20px 20px 0;
}

.three-three img {
  border-radius: 20px 0 0 20px;
}

HTML部分（保持原结构即可）

<div class="three-main">
  <div class="three-child">
    <div class="three-one">
      <img src="https://borah.link/wp-content/uploads/2022/10/SAJ-51-4.png">
    </div>
    <div class="three-two">
      <img src="https://borah.link/wp-content/uploads/2022/11/SAJ-66-3.png">
    </div>
    <div class="three-three">
      <img src="https://borah.link/wp-content/uploads/2022/10/SAJ-141-2.jpg">
    </div>
  </div>
</div>