html - 为什么显示: flex push the following element onto a new line?

Question

在我的代码中，第一个示例运行良好。第二个将第二个元素推到一个新行。

为什么？以及如何避免？

see this codepen

.one {
  background-color: cornflowerblue;
  width: 50%;
}
.one,
.two {
  height: 100%;
  font-size: 30px;
}
.two {
  width: 50%;
  background-color: salmon;
}
.ib {
  display: inline-block;
}
.container {
  font-size: 0;
  height: 200px;
}
.fb {
  display: flex;
}

<div class="container">
  <div class="one ib">one</div>
  <div class="two ib">two</div>
</div>

<div class="container">
  <div class="one fb">one</div>
  <div class="two ib">two</div>
</div>

Answer 1

您有三个 div，它们的 display 值设置为 inline-block。这些 div 中的每一个都有一个类 ib。

你有一个带有 display: flex 的 div。这个 div 有一个类 fb。

当您将 display: flex 应用到一个元素时，它变成了一个 block 级容器。作为 block 级元素，它会占用行中的所有可用空间，将任何后续元素推到下一行。

解决这个问题的方法是使用display: inline-flex代替display: flex。

Revised Codepen

来自规范:

3. Flex Containers: the flex and inline-flex display values

flex

This value causes an element to generate a block-level flex container box.

inline-flex

This value causes an element to generate an inline-level flex container box.