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;
}

ottom">
    
ottom">flex item 2

最佳答案

spec对此并不十分清楚,但它声明“Flex容器中的每个in-flow子节点变为flex项目,并且直接包含在flex容器内的每个连续文本行都包含在一个匿名的flex项目中“.这似乎暗示如果我将Flex容器放在另一个flex容器中,内部flex容器也会隐式地成为其包含flex容器的flex项,即使没有明确定义.规范的示例1显示了flex容器中的flex容器,并假设它是合法的语法,因此我的用例也可能是合法的,但是带有示例1的部分被标记为非规范的…(╯°□° )╯(┻━┻……此时我只是假设这是正确的.