html – 使用flex项作为flex容器

我想使用带有列布局的flexbox,但我希望将顶部的n – 1个flex项目固定到顶部,将第n个flex项目固定到主要Flex容器区域的底部.

我通过使用第n个flex项来解决这个问题,使用了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;
}