css - 将 `rem` 大小的元素挤压到全宽 flexbox 的中心

Question

这题涉及的代码比较多。代码can be found here如果你想玩它。为了演示布局，我需要插入一些类似 ipsum 的文本。

HTML

<main>
  <section data-pc-layout="mast">
    <article>
      <header><h2>Seriously serious seriousness</h2></header>
      <p>Intrinsicly pursue emerging alignments before quality benefits. Holisticly disseminate quality convergence rather than resource maximizing architectures. Distinctively expedite client-centered paradigms and business networks. Monotonectally productize bleeding-edge expertise with extensive results. Interactively brand next-generation total linkage and multidisciplinary expertise.</p>
    </article>
  </section>
  <!-- /TEXT RIGHT IMAGE -->

  <!-- TEXT LEFT IMAGE -->
  <section data-pc-layout="mast" data-pc-scheme="dark">
    <article>
      <header><h2>No really, so serial</h2></header>
      <p>Efficiently network intuitive applications rather than exceptional communities. Synergistically scale cross-platform experiences after alternative leadership. Credibly innovate cross-media users rather than cross functional "outside the box" thinking. Efficiently restore world-class results and efficient architectures. Energistically provide access to B2C e-markets with standardized results.</p>
    </article>
  </section>
  <!-- /TEXT LEFT IMAGE -->

  <!-- TEXT 1/2 -->
  <section data-pc-layout="half">
    <article>
      <header><h3>Boom</h3></header>
      <p>Authoritatively generate maintainable innovation before virtual bandwidth. Compellingly innovate vertical opportunities without high-quality content. Dynamically foster proactive convergence for goal-oriented resources. Enthusiastically mesh progressive products through value-added process improvements. Dramatically pontificate just in time synergy and economically sound bandwidth.</p>
    </article>
  </section>
  <!-- /TEXT 1/2 -->

  <!-- TEXT 1/2 -->
  <section data-pc-layout="half">
    <article>
      <header><h3>Shackalacka</h3></header>
          <p>Credibly plagiarize 24/365 testing procedures for synergistic ROI. Globally integrate innovative relationships with focused niches. Synergistically seize cost effective communities whereas multidisciplinary infomediaries. Credibly simplify business users whereas performance based sources. Dynamically leverage other's virtual strategic theme areas vis-a-vis process-centric vortals.</p>
    </article>
  </section>
  <!-- /TEXT 1/2 IMAGE -->

  <!-- TEXT FULL -->
  <section data-pc-layout="mast">
    <article>
      <header><h3>Getcha headlines here! Hot headlines!</h3></header>
      <p>Rapidiously repurpose distinctive products rather than standardized action items. Intrinsicly drive equity invested opportunities without ubiquitous products. Interactively underwhelm best-of-breed channels whereas proactive ROI. Competently negotiate effective infrastructures whereas functionalized sources. Quickly communicate out-of-the-box imperatives after strategic metrics.</p>
    </article>
  </section>
  <!-- /TEXT FULL -->
</main>

在为动态内容生成 HTML 时，某些部分可以是半 Angular 的，但应该具有给定 rem 值的 max-width。鉴于其他部分可能是全宽的并且具有横跨整个视口(viewport)宽度的深色背景，我无法将部分限制在容器内。

此外，由于部分的数量和它们的顺序是动态的，我不能将两个半宽部分包装在一个容器元素中以用于两个半宽元素的“行”。

CSS

body {
  font-size: 10px;
}

main {
  display: flex;
  flex-wrap: wrap;
  font-size: 16px;
  justify-content: center;
}

section {
  background-color: #ffaaff;
  flex-basis: 100%;
}

section[data-pc-scheme="dark"] {
  background-color: #333333;
  color: white;
}

section article {
  flex-basis: 100%;
  max-width: 75rem;
  margin: auto;
}

section[data-pc-layout="half"] {
  flex-basis: 50%;
  max-width: 37.5rem;
  margin: auto;
}

半宽部分的大小合适，但我的目标——也是我遇到问题的地方——是我想在不使用任何其他容器的情况下向中心“挤压”两个半宽部分(移除部分中间的白色间距，如下面的屏幕截图所示)。这两个部分应形成列，其边缘与上下内容的边缘对齐。

这是我期望 justify-content: center 在放置在 main 元素上时处理的东西(因为它在CSS)，但事实并非如此。

我假设我遗漏了一些简单的东西，因为这可能是一种常见的情况，但是——正如通常发生的那样——我已经盯着它看了很长时间，以至于我的眼睛有点交叉，想不出合适的解决方案.

Answer 1

我找到了问题所在。

您应该编辑边距。

我知道了

尝试这样编辑。

section[data-pc-layout="half"] {
  flex-basis: 50%;
  max-width: 37.5rem;
  //margin: auto;
}