1/3-2/3分栏布局内容对齐问题：寻求无媒体查询的优雅方案

现有50/50分栏布局：文本内容限制在1260px容器内，背景延伸至浏览器边缘，效果符合预期。但实现1/3-2/3分栏布局时，屏幕尺寸扩大后，文本内容无法与上方50/50布局的内容对齐。不想通过媒体查询解决，求适配所有屏幕的优雅方案。

现有HTML代码 #

<h2>Two column contained with full width background and contained content</h2>
<section>
  <div class="article-grid">
    <article>
      <div class="article-inner-grid">
        <div class="article-padding">
          <header>
            <h2>Heading 1</h2>  
          </header>
          <div class="entry-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In enim lorem, sollicitudin ut accumsan in, porta sed dui. Sed sagittis est risus, ac luctus odio porta at. </p>
          </div>
        </div>
      </div>
    </article>
    <article>
      <div class="article-inner-grid">
        <div class="article-padding">
          <header>
            <h2>Heading 2</h2>  
          </header>
          <div class="entry-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In enim lorem, sollicitudin ut accumsan in, porta sed dui. Sed sagittis est risus, ac luctus odio porta at. </p>
          </div>
        </div>
      </div>
    </article>
  </div>
</section>
<h2>Two column 1/3 2/3 with full width background and contained content</h2>
<section>
  <div class="article-grid">
    <article class="one-third">
      <div class="article-inner-grid">
        <div class="article-padding">
          <header>
            <h2>Heading 1</h2>  
          </header>
          <div class="entry-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In enim lorem, sollicitudin ut accumsan in, porta sed dui. Sed sagittis est risus, ac luctus odio porta at.</p>
          </div>
        </div>
      </div>
    </article>
    <article class="two-thirds">
      <div class="article-inner-grid">
        <div class="article-padding">
          <header>
            <h2>Heading 2</h2>  
          </header>
          <div class="entry-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In enim lorem, sollicitudin ut accumsan in, porta sed dui. Sed sagittis est risus, ac luctus odio porta at.</p>
          </div>
        </div>
      </div>
    </article>
  </div>
</section>

现有CSS代码 #

.article-container{
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}
section{
  margin-bottom:2rem;
}

.article-grid{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: stretch;
}
article{
  flex:1;
  display: flex;
  font-family: arial;
}
article:nth-of-type(1){
  background-color:blue;
  color:white;
  justify-content: flex-end;
}
article:nth-of-type(2){
  background-color:red;
  color:white;
  justify-content: flex-start;
}

.article-inner-grid{
  width:calc(#{$container} /2);
  max-width: calc(#{$container} /2);
}
.article-padding{
  padding:2rem;
}
h2{font-family: arial;}

article.one-third{
  flex:1  33%;
}
article.two-thirds{
  flex: 2  auto ;
}

article.one-third .article-inner-grid{
  width:calc(#{$container} /3);
  max-width: calc(#{$container} /3);
}

article.two-thirds .article-inner-grid{
  width:calc((#{$container} / 3) * 2);
  max-width: calc((#{$container} / 3) * 2);
}

解决方案 #

问题核心是：屏幕超过容器宽度时，1/3-2/3分栏的flex分配逻辑和全局容器的对齐基准不匹配。以下是无需媒体查询的优雅修复：

步骤1：统一全局容器变量 #

先定义统一的容器宽度变量，确保所有计算使用同一基准：

$container: 1260px;

步骤2：调整分栏对齐逻辑 #

移除原article的flex比例设置，改用固定宽度+自动填充边距的方式，让内容始终对齐全局容器：

.article-grid{
  display: flex;
  flex-flow: row nowrap; /* 禁止换行，保持分栏 */
  width: 100%; /* 占满屏幕宽度 */
}

/* 50/50分栏 */
article:nth-of-type(1){
  width: 50%;
  background-color:blue;
  color:white;
  padding-left: max(0px, (100vw - #{$container})/2); /* 自动填充屏幕到容器的左侧间距 */
  display: flex;
  justify-content: flex-end;
}
article:nth-of-type(2){
  width: 50%;
  background-color:red;
  color:white;
  padding-right: max(0px, (100vw - #{$container})/2); /* 自动填充屏幕到容器的右侧间距 */
  display: flex;
  justify-content: flex-start;
}

/* 1/3-2/3分栏 */
article.one-third{
  width: 33.333%;
  background-color:blue;
  color:white;
  padding-left: max(0px, (100vw - #{$container})/2);
  display: flex;
  justify-content: flex-end;
}
article.two-thirds{
  width: 66.666%;
  background-color:red;
  color:white;
  padding-right: max(0px, (100vw - #{$container})/2);
  display: flex;
  justify-content: flex-start;
}

原理说明 #

• max(0px, (100vw - #{$container})/2)：当屏幕宽度小于容器宽度时，边距为0；当屏幕超过容器宽度时，自动计算并填充屏幕边缘到容器的间距，确保内容始终对齐全局容器的左右边界。
• 固定分栏宽度（50%/33.333%/66.666%）配合边距填充，既保留了全屏背景，又让内容在任何屏幕尺寸下都和上方50/50布局对齐。

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