嵌套的flex容器改变了周围元素的对齐

Question

我正在摆弄flexbox,我注意到一些奇怪的东西.

即使CHILD 1不在flexbox中,整个.child元素的位置也会发生变化,因为它.centervert有一个垂直的flexbox:

#cont {
  background: blue;
}

.centervert {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: gray;
  height: 100%;
}

.child {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: green;
}

<div id="cont">

  <div class="child">
    CHILD 1
  </div>

  <div class="child ">
    <div class="centervert">
      CHILD 2
    </div>
  </div>
</div>

https://jsfiddle.net/d3ymxhe8/2/:

如果您注释掉display: flex,则CHILD元素会按预期并排显示.但是通过flex显示,CHILD1向下移动,以与.centervert的内容对齐.

是什么赋予了？

Answer 1

当您将显示设置为子2的flex并使文本垂直居中时,您导致子1根据其默认的vertical-align属性进行自我调整,该属性对于内联元素是基线.您可以将child1(以及child2)的垂直对齐属性设置为顶部或中间,这样可以消除间隙.

#cont {
  background: blue;
}
.centervert {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: gray;
  height: 100%;
}
.child {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: green;
  vertical-align:middle;
}

<div id="cont">
  <div class="child">
    CHILD 1
  </div>
  <div class="child ">
    <div class="centervert">
      CHILD 2
    </div>
  </div>
</div>