向全寬柔性盒的中心擠壓'rem`大小的物品

Question

這個問題涉及很多代碼。代碼can be found here如果你想玩它。爲了演示我需要插入一些ipsum-like文本的佈局。

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，一些部分可以是半寬，但應具有給定rem值的max-width。鑑於其他部分可能是全角，並具有跨越整個視口寬度的黑色背景，我無法約束容器內的部分。此外，由於節的數量及其順序是動態的，因此我無法在容器元素中爲兩個半寬元素的「行」包裝兩個半寬部分。

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

我發現了什麼使問題。

您應該編輯margin。

我明白了

試着像那樣編輯。

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