Flex容器中的元素未包装

Flex容器中的元素未包装

flex容器的初始设置为

flex-wrap: nowrap

。这意味着d性项目被强制保留在一行中。

您可以使用覆盖默认设置

flex-wrap: wrap

。

display

d性项目的值在d性布局中被忽略。

---

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

  -d性项目被迫停留在一行

请注意最后两项。

d性商品将连续排成一行，并且无法包装。

如果要在第一行上包含两个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-flex

not

display:flex

。这些可与

display: inline-block

和比较

display: block

。