Flex容器中的元素未包装

Question

当我尝试在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>

Answer 1

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 class="container">

  <div class="box"></div>

  <div class="box"></div>

  <div class="box"></div>

</div>

另外，如果您希望flex容器以内联方式显示，请使用display: inline-flexnot display: flex。这些可与display: inline-block和比较display: block。