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项目被强制保留在一行中.

您可以使用覆盖默认值flex-wrap: wrap.

display在flex布局中忽略flex项的值.

Flex容器,它是带有display: flex或的元素display: inline-flex,用于建立flex格式上下文.虽然类似于块格式化上下文,但存在差异.

一个区别是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-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不要使用display: flex.这些可以display: inline-block和display: block.