Question

我希望A坐在顶部，B坐在中间，C坐在底部。

<div class="container">
    <div class="a">A</div>
    <div class="sub-container">
        <div class="b">B</div>
        <div class="c">C</div>
    </div>
</div>

CSS：

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

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

编辑：

看起来应该是这样的

A

乙

C

Answer 1

CSS显示模块第3级引入了display: contents：

元素本身不生成任何框，但它的子元素和伪元素仍然正常生成框。出于...的目的框生成和布局，必须将元素视为具有已被文档中的子元素和伪元素替换树。

您可以使用它来“忽略”子容器，并将所有内部项目显示为属于同一容器。

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

<div class="container">
  <div class="a">A</div>
  <div class="sub-container">
    <div class="b">B</div>
    <div class="c">C</div>
  </div>
</div>

但是，它还没有被广泛支持。

Answer 2

对于.b和.c不是.a的兄弟姐妹的HTML代码，您可以通过 flex inception 获得所需的结果：{{1 }}既是父.sub-container的伸缩项，也是.container和.b

的伸缩容器

.c与身高比率1/3 + （1/3 + 1/3）相关

Fiddle

flex: 2 0 auto;

.container{
display: flex; 
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
position: fixed;
}
.sub-container {
flex: 2 0 auto;
/* flex inception */
display: flex;
flex-direction: column;
background-color: lightgreen;
}
.a, .b, .c {
flex: 1 0 auto; /* .a and .b, .c are not flex items of the same parent though we still want the same value */
padding: 1rem 0;
text-align: center;
}

改变孩子孩子的位置？

2 个答案: