水平にマージンと最大幅を中心に

Question

1000pxの幅が1remのsectionの要素を、ユーザーがどのような幅よりも小さくサイズ変更しても保持するようにしたいと考えています。

main { 
    align-items: center; 
    background: #eee; 
    display: flex; 
    flex: 1; 
    flex-grow: 1; 
    flex-flow: column nowrap; 
} 

section { 
    align-self: stretch; 
    background: #fff; 
    display: flex; 
    margin: 1rem; 
    max-width: 1000px; 
} 

残念ながら、これを微調整での私の試みから、3つの結果があります：私は「ので

• は、私は、適切1000pxの最大幅と中心が、側縁が持続していない何かを持っていますmを1rem autoを使用して計算します。
• 私は中心的なものを持っていますが、要素のサイズを変更しようとしません。
• 私は正しい幅を持ち、余白が残っていますが、左揃えです。

は、私はこれは私が利益のためにremユニットを使用していますので、信頼性がない@mediaブロックを使用して、別に動作するように取得するかどうかはわかりません。

Answer 1

あなたはスタックが

main { 
 
    align-items: center; 
 
    background: #eee; 
 
    display: flex; 
 
    flex: 1; 
 
    flex-grow: 1; 
 
    flex-flow: column nowrap; 
 
} 
 

 
section { 
 
    background: #f00; 
 
    display: flex; 
 
    margin: 1rem; 
 
    width: calc(100% - 2rem); 
 
    max-width: 1000px; 
 
}

<main> 
 
    <section> 
 
    Section 
 
    </section> 
 
</main>

スニペット width: calc(100% - 2rem);

Fiddle demo

を使用することができます