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

Question

我在CSS flexbox上遇到问题。昨天我有一个有效的代码，而今天当我测试解决方案时，由于某种原因它停止了工作。它与flexbox有关。

这是我想要的结果：

1. 能够使用justify-content定位内容。失败
2. 内容应占用所有可用空间，因此必须有flex-grow: 1。这也失败了。
3. 页脚应位于底部，因为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/

Answer 1

您的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分发。

Answer 2

您可以使用height：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;
}