使用flex项目作为flex容器 [英] using a flex item as a flex container

问题描述

我想用flexbox和列布局，但是我希望顶部 n-1 flex项目固定在顶部， nth flex项目被固定到主flex容器区域的底部。

我通过使用 nth flex项目也是使用 justify-content：flex-end 的新的flexbox / flex容器，但是我找不到任何示例是这样做的 - 所以这是一个正确的/可接受的解决方案根据标准，如果没有，我会如何去用这个flexbox？

这是一个简单的例子：

class =snippet-code-css lang-css prettyprint-override> .flex-container {display：-webkit-flex;显示：flex; -webkit-flex-direction：column; flex-direction：column;宽度：300px; height：240px; background-color：Silver;}。flex-container-bottom {display：-webkit-flex;显示：flex; -webkit-flex-direction：column; flex-direction：column;宽度：300px; height：240px;背景颜色：橙色; -webkit-justify-content：flex-end; -ms-flex-pack：end; justify-content：flex-end;}。flex-item {background-color：DeepSkyBlue;宽度：100px; height：100px; margin：5px;}。flex-item-bottom {background-color：red;宽度：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>  

解决方案

规范在这方面不太清楚，但是它声明Flex容器的每个流入子成为一个Flex项目，并且直接包含在Flex容器内的每个连续运行的文本都包装在一个匿名Flex项目中。这似乎意味着，如果我把一个柔性容器放在另一个柔性容器内部，即使没有明确定义，内部柔性容器也会隐式地变成其包含柔性容器的柔性项目。规范的示例1显示了flex容器内的flex容器，并且假定它是合法的语法，那么我的用例也可以是合法的，但是具有示例1的部分被标记为非规范性的...（╯°□° ）╯(┻━┻...在这一点上，我只是假设这是正确的。

I wanted to use flexbox with a column layout, but I wanted the top n - 1 flex items to be pinned to the top and the nth flex item to be pinned to the bottom of the main flex container area.

I solved this by using the nth flex item to also be a new flexbox/flex container using justify-content: flex-end, but I couldn't find any examples that were doing this - so is this a correct/acceptable solution according to the standard and, if not, how would I otherwise go about this with flexbox?

Here's a quick example:

.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>

解决方案

The spec isn't very clear on this, but it states that "Each in-flow child of a flex container becomes a flex item, and each contiguous run of text that is directly contained inside a flex container is wrapped in an anonymous flex item." This seems to imply that if I put a flex container inside another flex container that the inner flex container would also implicitly become a flex item for its containing flex container even if this is not explicitly defined. Example 1 of the specification shows a flex container within a flex container and assuming it is legal syntax it follows that my use case may also be legal, but the section with example 1 is marked as non-normative... (╯°□°）╯︵ ┻━┻... At this point I'm just going to assume this is correct.

这篇关于使用flex项目作为flex容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！