html – 为什么Flex容器中的元素保持在同一行？

发布时间：2020-12-14 19:43:42 所属栏目：资源来源：网络整理

导读：当我尝试在Flex容器中插入块元素时,它们都保持在同一行,就像它们是内嵌块一样： 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 /

当我尝试在Flex容器中插入块元素时,它们都保持在同一行,就像它们是内嵌块一样：

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

所以在这里我想要两个第一个div在同一行,最后一个在第二行.可悲的是,这似乎不行.

任何人都有想法？

解决方法

flex容器的初始设置是flex-wrap：nowrap.这意味着弹性物品被迫保持在一条线上.

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

在flex布局中忽略flex项目的显示值.

一个flex容器,它是一个显示元素：flex或display：inline-flex,建立了一个flex formatting context.尽管与block formatting context类似,但存在差异.

一个区别是Flex容器的子项忽略了显示属性.

另一个区别是,在柔性容器中,边缘不会崩溃,浮动和清除属性没有任何作用.

Flex容器还具有几个默认设置.其中：

> justify-content：flex-start – flex项将堆叠在行的开头
>弹性收缩：1 – 柔性物品允许收缩,不会溢出容器
> 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不显示：flex.这些可以显示：inline-block和display：block.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!