Question

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

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

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

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

Revised Codepen

来自规范：

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

<强> flex

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

<强> inline-flex

此值使元素生成内联级flex   容器盒。

Answer 2

.fb{
  display: inline-flex;
 }

如果您使用上述代码，您可以轻松地看到差异。
内联元素不会在新行上开始，只占用所需的宽度。
但是flex将从一条新线开始。

Answer 3

flex实际上是您在容器/父级别应用和启用的属性。从你的例子中不清楚你期望你的孩子（一个和两个）做什么？

请参阅此更新后的笔，其中我已从子项中删除了ib和fb类，并将fb应用于第二个container父级：http://codepen.io/angeliquejw/pen/qZRoLz?editors=1100

此外，CSS-Tricks有一个工厂细分，有助于理解flexbox的基础知识：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

更新以反映以下回复：flex，您最初使用的行为更像block（请参阅文档：https://developer.mozilla.org/en-US/docs/Web/CSS/display）。您想使用display:inline-flex：http://codepen.io/angeliquejw/pen/jqyxNz?editors=1100

为什么display：flex将以下元素推入新行？

3 个答案: