如何不使用transform让两列含“1”的div对齐同一行？

当前布局中，希望将第二列上移，让两个标有“1”的div处于同一行。能否不使用transform: translateY(calc(-100% + 102px))实现该效果？有没有其他方法让div向上填充对齐？

原始代码参考：

CSS #

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.col {
  display: flex;
  flex-direction: column;
  gap: 3px
}

.rev {
  flex-direction: column-reverse;
  transform: translateY(-100%);
}

.row {
  display: flex;
  flex-direction: row;
  gap: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  display: inline-block;
  color: white;
  text-align: center;
  line-height: 100px;
}

HTML #

<div class="row">
  <div class="col">
    <div class="box red">1</div>
    <div class="box blue">2</div>
    <div class="box green">3</div>
  </div>
  <div class="col rev">
    <div class="box red">1</div>
    <div class="box blue">2</div>
    <div class="box green">3</div>
    <div>X</div>
  </div>
</div>

方法1：负margin偏移 #

用负margin替代transform，直接把第二列往上拉，偏移量等于额外元素的高度加上列内的gap总和（这里是100px盒子高度+3pxgap=103px）。

修改.rev类的CSS：

.rev {
  flex-direction: column-reverse;
  margin-top: -103px; /* 替换原transform属性 */
}

HTML结构保持不变，这样两个“1”就能对齐在同一行，第二列的额外元素“X”会落在第一列的下方。

方法2：Grid布局重构 #

改用Grid布局可以更直观地控制每个元素的位置，不需要反向排列再偏移。把外层.row改成Grid容器，让子元素直接对应到网格行：

修改CSS：

.row {
  display: grid;
  grid-template-columns: 100px 100px; /* 两列宽度匹配盒子 */
  gap: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.col {
  display: contents; /* 让子元素直接参与Grid布局，忽略父容器 */
}

/* 给每个盒子指定网格行 */
.box:nth-child(1) { grid-row: 1; }
.box:nth-child(2) { grid-row: 2; }
.box:nth-child(3) { grid-row: 3; }

/* 第二列的额外元素放在第四行 */
.col:nth-child(2) > div:last-child {
  grid-row: 4;
  grid-column: 2;
  text-align: center;
}

这种方法不需要反向排列列，两个“1”自然处于第一行，结构更清晰，也避免了偏移计算。

方法3：相对定位偏移 #

用相对定位的top负值来实现上移，效果和transform类似，但属于定位方案：

修改.rev类的CSS：

.rev {
  flex-direction: column-reverse;
  position: relative;
  top: -103px; /* 偏移量同样是100px+3px */
}

相对定位不会脱离文档流，但在这个Flex布局场景下，视觉效果和transform一致，也能实现对齐需求。

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