将`rem`尺寸的物品挤压到全宽柔性箱的中心

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时，某些部分可以是半角，但应该具有给定max-width值的rem。鉴于其他部分可能是全宽并且背景跨越整个视口宽度，我无法限制容器内的部分。

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

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中）时要处理的东西，但事实并非如此。< / p>

我假设我错过了一些简单的东西，因为这可能是一种常见的情况，但是 - 通常会发生 - 我已经盯着它看足够长的时间让我的眼睛略微交叉，无法想到正确的解决方案

Answer 1

我找到了导致问题的原因。

您应该修改margin。

我明白了

尝试编辑。

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