如何在两行间嵌入居中右侧盒子？Flex/Grid布局调试问题

问题场景 #

需要实现三个盒子的布局：左侧上下排列两个盒子，右侧一个盒子垂直居中于左侧两个盒子之间。原Flex布局中使用flex-wrap: wrap和align-self: center无法达成目标，因为右侧盒子会被挤到单独一行，无法对齐左侧双盒子的垂直中间位置。

解决方案1：Grid布局（推荐） #

Grid布局可以直接通过行列划分实现跨区域对齐，代码简洁直观：

CSS代码

.container {
  display: grid;
  grid-template-columns: 60% 40%; /* 左右列宽比例 */
  grid-template-rows: auto auto; /* 两行高度自适应 */
  gap: 1.5rem;
  width: 100%;
}

.box {
  background-color: #fff;
  border: 2px solid #000;
}

.box1, .box2 {
  height: 250px;
}

.box1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.box2 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.box3 {
  grid-column: 2 / 3;
  grid-row: 1 / 3; /* 跨占左侧两行的区域 */
  align-self: center; /* 垂直居中对齐 */
  height: 250px;
}

HTML代码

<div class="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

解决方案2：Flex布局调整结构 #

通过嵌套Flex容器，将左侧双盒子包裹在一个垂直方向的Flex容器中，外层使用水平方向的Flex布局，实现右侧盒子的垂直居中：

CSS代码

.container {
  display: flex;
  gap: 1.5rem;
  width: 100%;
}

.left-boxes {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 60%;
}

.box {
  background-color: #fff;
  border: 2px solid #000;
}

.box1, .box2 {
  height: 250px;
}

.box3 {
  width: calc(40% - 1.5rem);
  height: 250px;
  align-self: center; /* 相对于外层容器垂直居中 */
}

HTML代码

<div class="container">
  <div class="left-boxes">
    <div class="box box1"></div>
    <div class="box box2"></div>
  </div>
  <div class="box box3"></div>
</div>

原代码问题分析 #

原代码中flex-wrap: wrap会让右侧盒子在空间不足时换行到单独一行，此时align-self: center仅作用于该盒子所在的单行，无法对齐左侧双盒子的整体垂直中间位置，因此没有效果。

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