どのようにFlexboxを使用してアイテムを引き伸ばしてセンターしますか？

Question

は、私はボックスはブロック要素のように展開するが、最大幅を超えて拡大していない、まだ中央に配置したいこのhttps://codepen.io/techsin/pen/JWQgoM

//html 
<div class="nav"> a \ b \ c</div> 
<div class="box"> no text</div> 

//css 
body { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    align-content: stretch; 
} 

.box { 
    max-width: 800px; 
    padding: 30px; 
    background-color: gray; 
    flex-grow:1; 
} 


.nav { 
    padding: 30px; 
    background-color: purple; 
    text-align: center; 
    color: #fff; 
} 

を見てみましょう。

align-itemsをボディにストレッチすると、ボックスは展開されますが、マージンがautoに設定されている場合は左に揃えられ、アイテムは中央に配置されている場合、ボックスはできるだけ幅を埋めるようにします。

ボックスを800ピクセルに拡大するだけですが、ウィンドウサイズが変更されると、その幅も低下します。通常のブロック要素の幅がデフォルトでどのように動作するかと同じです。

フレックスボックスを使用する全理由は、箱の残りの高さもカバーすることです。

Answer 1

は、同じように

Updated codepen

スタックは、スニペットboxwidth: 100%;、margin: 0 auto;とbox-sizing: border-box;ので、パディングがその幅に含まれます

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.box { 
 
    max-width: 800px; 
 
    width: 100%; 
 
    padding: 30px; 
 
    background-color: gray; 
 
    flex-grow:1; 
 
    margin: 0 auto; 
 
    box-sizing: border-box; 
 
} 
 

 
.nav { 
 
    padding: 30px; 
 
    background-color: purple; 
 
    text-align: center; 
 
    color: #fff; 
 
}

<div class="nav"> a \ b \ c</div> 
 
<div class="box"> no text</div>