[英]using a flex item as a flex container
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. 我想使用带有列布局的flexbox,但我希望将顶部的
n - 1
flex项目固定到顶部,将nth
flex项目固定到主要Flex容器区域的底部。
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? 我通过使用第
nth
flex项来解决这个问题,使用了justify-content: flex-end
也是一个新的flexbox / flex容器,但我找不到任何这样做的例子 - 所以这是一个正确/可接受的解决方案标准,如果没有,我将如何使用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." 规范对此并不十分清楚,但它声明“Flex容器中的每个in-flow子节点都变成了flex项目,并且直接包含在Flex容器内的每个连续文本行都包含在一个匿名的flex项目中“。 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.
这似乎暗示如果我将Flex容器放在另一个flex容器中,内部flex容器也会隐式地成为其包含flex容器的flex项,即使没有明确定义。 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.
规范的示例1显示了flex容器中的flex容器,并假设它是合法的语法,因此我的用例也可能是合法的,但是带有示例1的部分被标记为非规范的...(╯°□° )╯(┻━┻......此时我只是假设这是正确的。
It's hard to say that your use of flex-end
is wrong because you're getting the desired effect, but there's an easier way to do it. 很难说你使用
flex-end
是错误的,因为你获得了理想的效果,但是有一种更简单的方法。
Try using: 尝试使用:
.flex-container{
display: flex;
justify-content: space-between;
flex-direction: column;
}
justify-content: space-between;
forces your flex items to spread out as much as possible in the flex container. 强制您的Flex项目尽可能在Flex容器中展开。
This is the reference guide I use whenever doing anything with flexboxes: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 这是我在使用flexbox时做的任何参考指南: https ://css-tricks.com/snippets/css/a-guide-to-flexbox/
You can also try this this will make your last item to stick to bottom of your parent container 你也可以尝试这个,这将使你的最后一个项目坚持你的父容器的底部
.flex-container{
position:relative;
}
.flex-item-bottom{
position:absolute;
bottom:0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.