为什么display:flex将以下元素推送到新行？

Question

在我的代码中,第一个示例工作正常.第二个元素将第二个元素推送到新行.

为什么？以及如何避免它？

看到这个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.

你有一个div display: flex.这个div有一个类fb.

当您应用于display: flex元素时,它将成为块级容器.作为块级元素,它占用行中的所有可用空间,将任何后续元素推送到下一行.

解决这个问题的方法是使用display: inline-flex而不是display: flex.

修改了Codepen

从规格:

3. Flex Containers:flex和inline-flex显示值

flex

此值使元素生成块级Flex容器框.

inline-flex

此值使元素生成内联级Flex容器框.