Flex两栏布局：实现右栏并排右对齐、换行后自动左对齐

媒体查询适配不准的核心原因是它只能感知视口尺寸，无法感知flex子项的实际排布状态，用CSS容器查询可以完美解决这个问题，完全不需要手动设置断点，适配精度100%。

第一步：修正基础HTML结构 #

示例代码漏了外层.mainContainer的开标签，修正后完整基础结构如下：

<div class="mainContainer">
  <div class="leftContainer">
    This is my left aligned Text
  </div>
  
  <div class="rightContainer">
    This is text that should be right aligned when the box doesn't wrap and left aligned when it does.
  </div>
</div>

第二步：纯CSS实现（推荐） #

核心逻辑是给父容器开启容器尺寸监听，通过判断子项是否占满整行来自动切换对齐方式，代码如下：

.mainContainer{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  container-type: inline-size; /* 开启容器行向尺寸监听 */
  gap: 8px; /* 可选，设置两栏间距避免文本贴边 */
}

.leftContainer{
  text-align: left;
  flex: 0 1 auto;
  min-width: max-content; /* 保证内容不被强制压缩 */
}

.rightContainer{
  text-align: right;
  flex: 0 1 auto;
  min-width: max-content;
}

/* 当右栏宽度撑满父容器整行，说明已经触发换行 */
@container (width: 100%) {
  .rightContainer {
    text-align: left;
  }
}

方案优势 #

• 完全基于容器实际排布状态判断：只要两栏还能并排显示，右栏文本始终保持右对齐；一旦宽度不足触发换行，右栏自动占满整行、文本切换为左对齐，不会出现媒体查询那种提前切换的错位问题。
• 纯CSS实现，无JS性能开销，适配任意长度的文本内容，不需要手动维护断点值。
• 所有现代浏览器（Chrome 105+、Firefox 110+、Safari 16+）均已原生支持容器查询。

旧浏览器兼容兜底方案 #

如果需要兼容不支持容器查询的老旧浏览器，可以加几行JS做判断，核心逻辑是对比两个子项的垂直偏移位置，位置不一致就说明发生了换行：

const mainContainer = document.querySelector('.mainContainer');
const leftBox = document.querySelector('.leftContainer');
const rightBox = document.querySelector('.rightContainer');

const adjustAlign = () => {
  const isWrapped = rightBox.offsetTop > leftBox.offsetTop;
  rightBox.style.textAlign = isWrapped ? 'left' : 'right';
  rightBox.style.width = isWrapped ? '100%' : 'auto';
};

// 监听尺寸变化自动调整
window.addEventListener('resize', adjustAlign);
new ResizeObserver(adjustAlign).observe(mainContainer);
// 初始化执行一次
adjustAlign();

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