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

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

为什么?？如何避免呢

.one{
背景颜色：矢车菊蓝；
宽度：50%；
}
.1，
.二{
身高：100%；
字体大小：30px；
}
.二{
宽度：50%；
背景颜色：鲑鱼；
}
.ib{
显示：内联块；
}
.集装箱{
字号：0；
高度：200px；
}
.fb{
显示器：flex；
}

一
二
一
二

flex

实际上是您在容器/父级应用和启用的属性。从您的示例中不清楚您希望您的孩子div（1和2）做什么

查看此更新笔，其中我已从子类中删除

ib

和

fb

类，并将

fb

应用到第二个

容器

父类：

此外，CSS技巧还有一个fab细分，有助于理解flexbox的基础知识：

更新以反映以下响应：

flex

，您最初使用它，其行为更像

block

（请参阅文档：）。您想使用

显示：内联flex

：

如果您使用上面的代码，您可以很容易地看到差异。
内联元素不从新行开始，只占用所需的宽度。
但是flex将从一条新的生产线开始

---

有三个div的

显示

值设置为

内联块

。每个div都有一个类

ib

您有一个带有

display:flex

的div。此div有一个类

fb

将

display:flex

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

解决此问题的方法是使用

display:inline flex

而不是

display:flex

根据规范：

flex

该值使元素生成块级flex容器 盒子

内联flex

此值导致元素生成内联级别的flex 集装箱箱

---

嗯，问题写在标题里。您的代码笔不是我想要的，因为没有可以推到新行的以下元素如果您希望第二个元素是flex容器，请尝试使用

display:inline flex

：

flex

，您最初使用的，其行为更像

block

。

.fb{
  display: inline-flex;
 }