如何用Flex或Float实现单元格左右顶部对齐且保持HTML结构不变？

原始HTML代码 #

<div class="row">
  <div class="cell left">A</div>
  <div class="cell left">B</div>
  <div class="cell right">C</div>
  <div class="cell left">D</div>
  <div class="cell right">E</div>
  <div class="cell left">F</div>
</div>

需求说明 #

• 所有cell left类元素：左对齐 + 顶部对齐
• 所有cell right类元素：右对齐 + 顶部对齐
• 必须保留现有HTML结构，单元格数量、顺序无固定规律

CSS实现方案 #

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; /* 强制所有单元格垂直顶部对齐 */
  gap: 10px; /* 可选：添加单元格间距，增强可读性 */
}

.cell {
  padding: 8px 16px;
  border: 1px solid #ddd; /* 可选：添加边框方便观察效果 */
}

.cell.right {
  margin-left: auto; /* 利用Flex空间分配，将元素推至当前行最右侧 */
}

方案说明 #

1. Flex布局核心：.row设置display: flex和flex-wrap: wrap，让单元格自动换行适配宽度；align-items: flex-start彻底解决右侧单元格顶部不对齐的问题，确保所有单元格在垂直方向紧贴顶部。
2. 右侧元素对齐：.cell.right的margin-left: auto是关键——Flex布局中，auto margin会自动填充剩余空间，直接将元素推到当前行的最右端，不管前面有多少左对齐元素，都能稳定实现右对齐。
3. 兼容性：该方案兼容所有现代浏览器，且完全不需要修改原始HTML结构，适配任意数量、任意顺序的左右单元格组合。

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