使用flex项目作为flex容器

Question

我想使用带有列布局的flexbox,但我希望将顶部n - 1弹性项目固定到顶部,将nth弹性项目固定到主要弹性容器区域的底部.

我通过使用nthflex项目来解决这个问题也是一个新的flexbox/flex容器使用justify-content: flex-end,但我找不到任何这样做的例子 - 所以这是一个正确/可接受的解决方案,根据标准,如果没有,如何我会用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

该规范是不是对这个很清楚,但它指出,"每一个在流动儿童Flex容器变成柔性项目,以及直接包含在柔性容器内文本的每个连续运行被包裹在一个匿名弯曲项目".这似乎暗示如果我将Flex容器放在另一个flex容器中,内部flex容器也会隐式地成为其包含flex容器的flex项,即使没有明确定义.规范的示例1显示了flex容器中的flex容器,并假设它是合法的语法,因此我的用例也可能是合法的,但是带有示例1的部分被标记为非规范的...(╯°□° )╯(┻━┻......此时我只是假设这是正确的.