理由 - 内容和flex-grow被忽略

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

你可以用高度固定：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;
}