如何用Flexbox实现左列单图右列双图的布局？

问题分析 #

你的代码存在语法和逻辑错误，导致布局不符合预期：

• .container 中 flex-wrap: column wrap 是无效值，Flexbox 无该属性取值；
• .column 的 flex: ; 是语法错误，未指定弹性比例；
• 图片高度设置不合理，缺少object-fit控制填充方式；
• 多余的flex-wrap属性造成布局混乱。

修正后的代码 #

HTML（结构无需修改）

<div class="container">
  <div class="column">
    <div class="button rowspan">
      <a href="https://jason1chiu.github.io/accessibility-measures-met/">
        <img src="./assets/images/first-project.webp" class="first-project" alt="first-project">
        <div>
          <h3>1st Project</h3>
          <span>HTML/CSS</span>
        </div>
      </a>
    </div> 
  </div>

  <div class="column">
    <div class="button">
      <a href="https://jason1chiu.github.io/accessibility-measures-met/">
        <img src="./assets/images/first-project.webp" class="new-project" alt="second-project">
        <div>
          <h3>2nd Project</h3>
          <span>HTML/CSS</span>
         </div>
      </a>
    </div>
    <div class="button">
      <a href="https://jason1chiu.github.io/accessibility-measures-met/">
        <img src="./assets/images/first-project.webp" class="new-project" alt="third-project">
        <div>
          <h3>3rd Project</h3>
          <span>HTML/CSS</span>
        </div>
      </a>
    </div>
  </div>
</div>

CSS

.container {
  display: flex;
  width: 100%;
  height: 80vh; /* 可根据需求调整高度，比如固定像素值 */
  gap: 20px; /* 控制列间距，替代图片零散padding */
  padding: 20px;
  box-sizing: border-box;
}

.column {
  flex: 1; /* 两列宽度均分 */
  display: flex;
  flex-direction: column;
}

.button {
  flex: 1; /* 右列两个button平分高度 */
  position: relative;
}

.button.rowspan {
  flex: 1; /* 左列单个button占满整列高度 */
}

.first-project, .new-project {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片按比例填充容器，避免变形 */
  display: block; /* 消除图片默认行内间隙 */
}

/* 可选：优化文字层样式 */
.button div {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: #fff;
  background: rgba(0,0,0,0.7);
  padding: 5px 10px;
  border-radius: 4px;
}

修改说明 #

1. 容器设置：给.container指定高度，确保右列按钮能平分高度；用gap和统一padding控制间距，布局更整洁。
2. 列布局：.column设flex:1让两列宽度相等，左列单个按钮自动占满整列高度，右列两个按钮通过flex:1平分高度。
3. 图片处理：height:100%让图片填充容器，object-fit:cover保证比例不变形，display:block消除图片底部默认间隙。
4. 冗余清理：移除无效flex-wrap属性，修正语法错误的flex: ;。

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