html - 使用 flex 元素作为 flex 容器

Question

我想将 flexbox 与列布局一起使用，但我希望将顶部的 n - 1 flex 元素固定到顶部，并将 nth flex 元素固定在顶部固定在主要 flex 容器区域的底部。

我通过使用 nth flex item 来解决这个问题，同时使用 justify-content: flex-end 将其作为一个新的 flexbox/flex 容器，但我找不到任何这样做的例子 - 根据标准，这是一个正确/可接受的解决方案，如果不是，我将如何使用 flexbox 解决这个问题？

这是一个简单的例子:

.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  width: 300px;
  height: 240px;
  background-color: Silver;
}
.flex-container-bottom {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  width: 300px;
  height: 240px;
  background-color: orange;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.flex-item {
  background-color: DeepSkyBlue;
  width: 100px;
  height: 100px;
  margin: 5px;
}
.flex-item-bottom {
  background-color: red;
  width: 100%;
  height: 50px;
}

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item flex-container-bottom">
    <div class="flex-item-bottom">flex item 2</div>
  </div>
</div>

Answer 1

spec对此不是很清楚，但它指出“flex 容器的每个流入子代都成为一个 flex 元素，并且直接包含在 flex 容器内的每个连续文本运行都被包裹在一个匿名 flex 元素中。”这似乎意味着如果我将一个 flex 容器放在另一个 flex 容器中，即使没有明确定义，内部 flex 容器也会隐式成为其包含的 flex 容器的 flex 元素。规范的示例 1 显示了 flex 容器中的 flex 容器，假设它是合法的语法，那么我的用例也可能是合法的，但是示例 1 的部分被标记为非规范的......(╯°□° )╯︵ ┻━┻...在这一点上，我只是假设这是正确的。