html - 调整内容和伸缩增长被忽略

我在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>

https://jsfiddle.net/re01pn2x/

最佳答案

您的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>

更多详细信息：How to make div 100% height of the browser window?



justify-content

请注意，justify-content在您的代码中不起作用，因为没有可用空间。此属性通过在容器中分配可用空间来工作。在这种情况下，因为容器默认为height: auto，所以只有足够的空间来容纳内容。

justify-content和flex-grow

还要注意，即使定义了height会创建额外的空间，但如果使用justify-content，flex-grow也将不起作用。为什么？因为flex-grow会占用该可用空间，因此再次没有空间分配给justify-content。

关于html - 调整内容和伸缩增长被忽略，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55674798/