我有以下代碼:爲什麼Flex項目擴展全高而沒有flex-grow?
.ai-container,
.ai-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
}
.ai-overlay {
background-color: black;
opacity: .2;
z-index: 1000;
}
.ai-dialog {
z-index: 1001;
display: flex;
flex-direction: column;
border: 1px solid darkgray;
border-radius: 5px;
background-color: white;
min-width: 300px;
box-shadow: 0px 0px 15px #444;
overflow: hidden;
}
.ai-header,
.ai-footer,
.ai-body {
padding: 10px;
}
.ai-header {
background-color: hsl(0, 0%, 20%);
color: white;
display: flex;
font-size: 1.1em;
justify-content: space-between;
}
.ai-footer {
display: flex;
background-color: lightgray;
justify-content: space-between;
}
<div class="ai-container">
<div class="ai-overlay"></div>
<div class="ai-dialog">
<div class="ai-header">
<span>This is the header</span>
<span>X</span>
</div>
<div class="ai-body">This is the body</div>
<div class="ai-footer">
<span>
<button>Submit</button>
<button>Lookup</button>
</span>
<button>Cancel</button>
</div>
</div>
</div>
您可以在這裏看到的結果:http://plnkr.co/edit/5SOxkMV9qQ86m6d2jyT0?p=preview
然而,由此產生的 「對話」 被拉伸以填充整個垂直空間。
我期待這個,如果我有flex-grow: 1
,但我沒有。
如果您添加以下的CSS:
.ai-container, .ai-overlay {
... /*all the previous settings */
align-items: center;
}
然後在對話框看起來像我所期望的......只是高到足以適應內容。我認爲刪除align-items
只是將對話框移到瀏覽器窗口的頂部而不影響高度。
我在這裏錯過了什麼?
我嘗試添加'柔性基礎:content'和'柔性成長:0'到我所有的孩子班,但沒有任何變化。 – RHarris