flex容器的初始设置为
flex-wrap: nowrap。这意味着弹性项目被强制保留在一行中。
您可以使用覆盖默认设置
flex-wrap: wrap。
display弹性项目的值在弹性布局中被忽略。
一个flex容器，它是带有
display: flex或的元素
display: inline-flex，可建立一个
flex格式化上下文 。尽管类似于
块格式化上下文
，但还是有所不同。
一个区别是flex容器的子代忽略该
display属性。
另一个区别是，在flex容器中，边距不会折叠，并且
float和
clear属性无效。
Flex容器还带有一些默认设置。其中：
justify-content: flex-start
-flex项目将堆叠在行的开头flex-shrink: 1
-允许伸缩物品收缩并且不会溢出容器align-items: stretch
-伸缩物品将扩展以覆盖容器的横向尺寸flex-direction: row
-伸缩项目将水平对齐flex-wrap: nowrap
-弹性项目被迫停留在一行
请注意最后两项。
弹性商品将连续排成一行，并且无法包装。
如果要在第一行上包含两个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 > <div ></div> <div ></div> <div ></div></div>另外，如果您希望flex容器以内联方式显示，请使用
display: inline-flexnot
display:flex。这些可与
display: inline-block和比较
display: block。
