两个独立Flex容器列的行无法共用对齐基准线问题咨询

结论 #

纯Flex布局无法实现该需求，改用Grid布局可以完美满足两列行基准线统一对齐的要求。

Flex布局无法实现的原因 #

你当前使用了两个独立的Flex子容器，Flex规范中没有跨独立容器同步行高的能力，两个容器的行高、行间距计算完全独立：

• 行数少时两个容器总高度接近，顶层容器align-items: stretch会把两个容器拉到同一高度，自动分配的行间距刚好让行位置重合，属于巧合的符合预期
• 行数增加后，两个容器的内容总高度差变大，各自内部按自身item高度计算行高，自然会出现错位
• 你修改顶层align-items属性出现的不同表现，本质也是两个独立容器没有统一的行高对齐规则导致的

Grid布局实现方案 #

方案1：合并所有子元素到同一个Grid容器（兼容性最好）

不需要拆分左右两个子容器，直接把所有item放在顶层容器中，全局定义6列网格（左右各3列），Grid默认会自动将同一行所有单元格的高度统一匹配当前行最高的元素，天然满足对齐需求。
示例代码如下：

HTML

<div id="ctr">
  <!-- 左列原有的所有item -->
  <div class="flexitem" style="height: 36px"></div>
  <div class="flexitem" style="height: 46px"></div>
  <div class="flexitem" style="height: 46px"></div>
  <div class="flexitem" style="height: 33px"></div>
  <div class="flexitem" style="height: 46px"></div>
  <div class="flexitem" style="height: 22px"></div>
  <div class="flexitem" style="height: 46px"></div>
  <div class="flexitem" style="height: 46px"></div>
  <div class="flexitem" style="height: 54px"></div>
  <!-- 右列原有的所有item -->
  <div class="flexitem" style="height: 62px"></div>
  <div class="flexitem" style="height: 71px"></div>
  <div class="flexitem" style="height: 49px"></div>
  <div class="flexitem" style="height: 71px"></div>
  <div class="flexitem" style="height: 71px"></div>
</div>
<div id="other"></div>

CSS

*{
  box-sizing:border-box;
}
#ctr{
  display: grid;
  /* 一共6列，前3列是左半区，后3列是右半区，总宽度各占50% */
  grid-template-columns: repeat(6, 1fr);
  border:2px solid orange;
  /* 如果需要左右半区之间有间隔可以加column-gap */
  column-gap: 10px;
}
.flexitem{
  border: 1px solid yellow;
}
/* 左半区（前3列）item样式 */
#ctr .flexitem:nth-child(6n+1),
#ctr .flexitem:nth-child(6n+2),
#ctr .flexitem:nth-child(6n+3){
  background:purple;
}
/* 右半区（后3列）item样式 */
#ctr .flexitem:nth-child(6n+4),
#ctr .flexitem:nth-child(6n+5),
#ctr .flexitem:nth-child(6n){
  background:green;
}
#other{
  height:300px;
  background:lightblue;
}

方案2：保留原有左右子容器结构（需使用subgrid，现代浏览器支持）

如果必须保留原有两个子容器的DOM结构，可以用subgrid让子容器继承父容器的行轨道，实现行高同步：

#ctr{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
  border:2px solid orange;
}
.flexctr{
  display: grid;
  /* 子容器列数3列，行轨道继承父容器 */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: subgrid;
  /* 子容器的行要跨父容器所有行 */
  grid-row: 1 / -1;
  border:2px solid black;
}

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