当我尝试在flex容器中插入块元素时,它们都保持在同一行,就像它们是内联块一样.
我希望两个第一个div在同一条线上,最后一个在第二条线上.可悲的是,这似乎不起作用.
有人有什么想法吗？
<div style="display: flex">
<div style="display: inline-block">
This is an inline block element
</div>
<div style="display: inline-block">
This is an inline block element
</div>
<div style="display: block">
This is a block element
</div>
</div>
解决方法
flex容器的初始设置是flex-wrap：nowrap.这意味着Flex项目被强制保留在一行中.
您可以使用flex-wrap：wrap覆盖默认值.
在flex布局中忽略弹性项目的显示值.
一个flex容器,它是一个带有display：flex或display：inline-flex的元素,它建立了一个flex formatting context.虽然类似于block formatting context,但是存在差异.
一个区别是flex容器的子节点忽略display属性.
另一个区别是,在flex容器中,边距不会折叠,float和clear属性不起作用.
Flex容器还带有几个默认设置.其中：
> justify-content：flex-start – flex项目将在行首开始堆叠
> flex-shrink：1 – 允许flex项收缩,不会溢出容器
> align-items：stretch – flex项目将展开以覆盖容器的交叉大小
> flex-direction：row – flex项目将水平对齐
> flex-wrap：nowrap – flex项目被强制保留在一行中
请注意最后两项.
Flex项目将排成一行,无法换行.
如果要在第一行上有两个flex项,在第二行上有第三个项,请允许容器使用flex-wrap：wrap进行多行.
.container {
display: flex;
flex-wrap: wrap;
}
.Box {
flex: 0 0 45%;
height: 50px;
margin: 5px;
background-color: lightgreen;
border: 1px solid #ccc;
}
<div class="container"> <div class="Box"></div> <div class="Box"></div> <div class="Box"></div> </div>
此外,如果您希望flex容器以内联方式显示,请使用display：inline-flex not display：flex.它们与display：inline-block和display：block相当.
