Html Flex-更改子对象的位置'；谁的孩子？ 我想让A坐在上面，B坐在中间，C坐在底部。< / P>

我需要保持相同的标记-如何更改不是flex容器直接子级的div的位置

编辑：

应该是这样的

A

B

---

C

CSS显示模块3级引入：

元素本身不生成任何框，而是生成其子元素和子元素 伪元素仍然像正常情况一样生成长方体。为了 框生成和布局时，必须将元素视为 已替换为文档中的子元素和伪元素 树

您可以使用它来“忽略”子容器，并显示所有内部项目，就好像它们属于同一个容器一样

body{margin:0}
.集装箱{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
身高：100%；
位置：固定；
}
.分箱{
显示：内容；
}

A.
B
C

使用此HTML代码，其中

.b

和

.c

不是

.a

的兄弟，您可以通过flex inception实现所需的结果：

。子容器

既是父级

的flex项，也是
.b
和
.c
的flex容器

flex:20自动与1/3+的高度比相关（1/3+1/3）



.container{
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
宽度：100%；
身高：100%；
位置：固定；
}
.分箱{
flex:20自动；
/*弹性起始*/
显示器：flex；
弯曲方向：立柱；
背景颜色：浅绿色；
}
.a、.b、.c{
flex:1 0 auto；/*.a和.b、.c不是同一父级的flex项，尽管我们仍然需要相同的值*/
填充：1rem0；
文本对齐：居中；
}

A.
B
C
顶部、中间和底部（对齐或顺序）是什么意思？你使用子容器的理由是什么？我需要使用一个移动版本的NavaWin的子容器，我的意思是对齐，A应该在顶部，B在中间。安排已经是上中下！“不过，它还没有得到广泛的支持。”那么它没用了吗？@panthro它也没用。如果两年左右有人有同样的问题，他将能够使用它。我的回答不是专门为你解决这个问题，我的回答是帮助社区。我要指出（我认为）如果其他人的身高不一样，这仍然不会成为中间因素的中心。没有任何机制可以保证某个特定的flex项目是死点。@Paulie_D True，这将使B与a和C等距，但不一定将其放置在flex容器的中间。考虑到<代码>证明内容：之间的空间<代码>，我认为这是我想要的行为。哦…你的答案很好…我只是想澄清一下，因为我有一种感觉，这就是OP的目的。我不希望它们的高度相等，它们应该是它们内容的高度。更像这样：？B不是完全居中，它的顶部是可见高度的50%，你可能希望它的中心居中？
<div class="container">
    <div class="a">A</div>
    <div class="sub-container">
        <div class="b">B</div>
        <div class="c">C</div>
    </div>
</div>

.container{
    display: flex; 
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    position: fixed;
}