使用flex项作为flex容器

Question

我想使用带有列布局的flexbox，但我希望将顶部的n - 1弹性项固定在顶部，而将nth的flex项固定在主挠性容器区域的底部。

我通过使用nth 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;
}

<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容器中，那么内部flex容器也将隐式地成为其包含的flex容器的flex项，即使这不是显式定义的。规范的示例1显示了flex容器中的flex容器，假设它是合法语法，那么我的用例也可能是合法的，但是示例1的部分被标记为非规范的.(╯°-°)╯︵┻━┻.在这一点上，我只是假设这是正确的。

Answer 2

很难说您使用flex-end是错误的，因为您正在获得预期的效果，但是有一个更简单的方法来实现它。

试着使用：

.flex-container{
   display: flex;
   justify-content: space-between;
   flex-direction: column;
}

justify-content: space-between;强制您的flex项目在flex容器中尽可能地展开。

这是我在使用柔性盒做任何事情时使用的参考指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

您也可以尝试这样做--这将使您的最后一项停留在父容器的底部。

.flex-container{
    position:relative;
   }
 .flex-item-bottom{
    position:absolute;
    bottom:0;
 }