如何使用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設置為在body上拉伸，那么box會擴展但是它會向左對齊，如果設置margin auto或者align-items to center，則box會停止嘗試盡可能多地填充寬度。

我只想讓box擴展到800像素，但是當窗口大小改變時，它的寬度也會下降，就像任何常規塊元素的寬度默認行為一樣。

使用flexbox的全部理由是讓盒子也覆蓋剩余高度。

Answer 1

給box width: 100%; ， margin: 0 auto; 和box-sizing: border-box; ，所以填充包含在其寬度中

更新了codepen

堆棧代碼段

 * { 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>