为什么Flex项目扩展全高而没有flex-grow?
问题描述:
我有以下代码:为什么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
只是将对话框移到浏览器窗口的顶部而不影响高度。
我在这里错过了什么?
答
我认为删除
align-items
只是将对话框移到浏览器窗口的顶部而不影响高度。
你就近了。您假定默认值为align-items
为flex-start
。其实,默认值是stretch
。
这意味着Flex项目将始终展开以覆盖容器横轴的全部长度,除非初始设置被覆盖。
您可以覆盖与align-items: flex-start
,center
默认等
+1
谢谢吨!它做到了。我忽略了默认值! – RHarris
我尝试添加'柔性基础:content'和'柔性成长:0'到我所有的孩子班,但没有任何变化。 – RHarris