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）的垂直对齐属性设置为顶部或中间，这样可以消除间隙。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

1 个答案: