這是我的代碼：
.content {
display: flex;
align-items: center;
justify-content: center;
}
.main {
flex: 1;
background-color: pink;
}<div class="content">
<div class="main">
<p>This is a test!</p>
</div>
</div>但是，這只會創建一個框，上面寫著“這是一個測驗！” 粉紅色的盒子下面是一堆空白的空間。我希望彈性盒子用粉紅色完全填充它下面的所有東西。我該怎么做呢？
我已經嘗試過 align-items: stretch 和其他十億種方法，但我似乎無法讓它發揮作用。
我還是 flexbox 的新手，所以如果我可能遺漏了一些基本知識，請告訴我。
uj5u.com熱心網友回復：
將背景色直接添加到彈性容器中。你也應該添加一個min-heightlike min-height: 100vh。默認情況下，flex-container 只會使用 aheight 來適應內容。
.content {
display: flex;
align-items: center;
justify-content: center;
background-color: pink;
min-height: 100vh;
}
.main {
flex: 1;
}
body {
margin: 0;
}<div class="content">
<div class="main">
<p>This is a test!</p>
</div>
</div>uj5u.com熱心網友回復：
因此，為了讓子.maindiv 伸展全高，父級.content需要有一個定義的高度。最簡單的方法是為其添加一個最小高度（最小高度）。在您的情況下，如果我說對了，您希望它延伸到整個頁面，因此我們添加了 100vh 的最小高度。這里的“vh”單位代表視口高度（更多關于 CSS 單位）。
現在我們已經讓內容全高了，有兩種方法可以讓子.maindiv 覆寫“flexbox”.content 的整個區域。您可以align-items: stretch在.content(parent) 上使用，也可以align-self: stretch在 child 上使用.main。
在這里，我使用了第二個選項。兩者在你的情況下都是一樣的，但如果你需要放置其他物品，那么你可以選擇一種方法而不是另一種方法。
.content {
display: flex;
align-items: center;
justify-content: center;
min-height:100vh;
}
.main {
flex: 1;
background-color: pink;
align-self:stretch;
}<div class="content">
<div class="main">
<p>This is a test!</p>
</div>
</div>注意：如果您在此處運行示例，您可能會看到粉紅色區域周圍有一個白色邊框，它來自body具有默認填充/邊距的 HTML。要擺脫這種情況，您可以padding:0; margin:0;在body元素上添加一個。但這與您的實際問題或解決方案無關。
uj5u.com熱心網友回復：
該單元vh基于View Height. 因此，如果您想填滿（您的螢屏）的所有內容，view height請使用.view portheight: 100vh;
對于寬度，是相同的，但單位為“vw”（View Width）。
這是關于HTML 單元的檔案
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/419156.html
標籤：