如何使用Flexbox拉伸和居中放置物品？

看看這個https://codepen.io/techsin/pen/JWQgoM 如何使用Flexbox拉伸和居中放置物品？

//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設置爲在身體上拉伸，那麼box會展開，但會向左對齊，如果設置margin margin auto或align-items居中，則box會停止嘗試儘可能寬的方向進行填充。

我只是想要盒子擴大到800像素，但是當窗口大小改變時，它的寬度也會下降，就像默認情況下任何常規塊元素的寬度會起作用一樣。

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

來源

2017-04-09 Muhammad Umer

它在相同的方式工作，我看不到任何問題。 – aje

我希望盒子可以垂直展開以填充剩餘空間，水平展開但不超過800像素，並且在屏幕寬度較短並且水平居中的情況下縮小尺寸。現在情況並非如此。它的確可以垂直擴展，但它要麼擴大到800px，要麼是居中，而不是同時加入 –

給了boxwidth: 100%;，margin: 0 auto;和box-sizing: border-box;，使填充被包含在其寬度

Updated 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>

來源

2017-04-09 06:09:35 LGSon

所以整個技巧是增加'width：100％'，我今天學到了東西 –

@MuhammadUmer基本上是 – LGSon

如何使用Flexbox拉伸和居中放置物品？

回答

相關問題