理由 - 内容和flex-grow被忽略
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了理由 - 内容和flex-grow被忽略相关的知识，希望对你有一定的参考价值。
我遇到了CSS flexbox的问题。昨天我有一个工作代码，但今天我测试了我的解决方案，由于某种原因它停止了工作。它与flexbox有关。
这是我想要的结果：
- 能够使用
justify-content定位内容。这失败了 - 内容应占用所有可用空间，因此它具有
flex-grow: 1。这也失败了。 - 页脚应位于底部，因为
flex-grow: 1可以通过占用所有可用空间将内容压低。这失败了。
似乎整个flexbox都停止了正常工作。
我认为问题是由于某些原因，flexbox甚至没有正确回应：
`justify-content: flex-start`
如果我尝试任何其他值，如center，flex-end等，没有任何事情发生。
有趣的是，昨天flexbox表现正常，我可以用justify-content定位它，今天我不能。
我在这里缺少的是为什么至少justify-content: flex-end或justify-content: center没有正确行为并定位内容？
如果我解决导致justify-content停止工作的问题，我相信flex-grow也会起作用。
有谁知道它为什么行为不端？
我可以灵活地使用这个游乐场，所以我知道我的代码应该正常工作，我上面的代码正是我在操场上所做的：https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/
.ikigai {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.header, .footer {
height: 80px;
margin: 10px;
border: 1px dashed lightgray;
}
.content {
margin: 10px;
border: 1px dashed lightgray;
flex-grow: 1;
}<div class="ikigai">
<div class="header">this is a header</div>
<div class="content">content</div>
<div class="footer">footer 12</div>
</div>答案
您的Flex容器没有定义高度。
因此，它默认为height: auto（内容驱动的高度）。
将其添加到您的代码中：
.ikigai {
height: 100vh;
}
.ikigai {
display: flex;
flex-direction: column;
/* justify-content: flex-start; */ /* default value; not necessary */
height: 100vh;
}
.header, .footer {
height: 80px;
flex-shrink: 0; /* optional; if you don't want items to shrink vertically */
margin: 10px;
border: 1px dashed lightgray;
}
.content {
margin: 10px;
border: 1px dashed lightgray;
flex-grow: 1;
}
body {
margin: 0; /* override default margins; prevents vertical scrollbar */
}<div class="ikigai">
<div class="header">this is a header</div>
<div class="content">content</div>
<div class="footer">footer 12</div>
</div>另一答案
你可以用高度固定：100vh;
.ikigai {
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 100vh;
}
.header, .footer {
height: 80px;
margin: 10px;
border: 1px dashed lightgray;
}
.content {
margin: 10px;
border: 1px dashed lightgray;
flex-grow: 1;
}
以上是关于理由 - 内容和flex-grow被忽略的主要内容，如果未能解决你的问题，请参考以下文章