有没有办法使 dispaly=flex 的元素的子元素实现边距重叠

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1813 天前的主题，其中的信息可能已经有所发展或是发生改变。

flex

dispaly

元素

重叠

9 条回复 • 2020-01-06 17:55:10 +08:00

TomVista

2020-01-06 17:13:22 +08:00

我搜的博客都说 flex 布局的元素是 bfc,,,,,结果 mdn 上是
Flex items (direct children of the element with display: flex or inline-flex).
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

低质量博客害人

rabbbit

2020-01-06 17:17:51 +08:00

带有 display:flex 的元素会创建 BFC, 这样理解哪里有错吗?

TomVista

2020-01-06 17:24:44 +08:00

@rabbbit 带有 display:flex 的元素的第一级子元素是 bfc. 带有 display:flex 的元素不是.

rabbbit

2020-01-06 17:35:20 +08:00

@TomVista
带 display: flex 的不是吗?

rabbbit

2020-01-06 17:48:55 +08:00

TomVista

2020-01-06 17:51:28 +08:00

我这里不是 https://i.loli.net/2019/12/25/PtqDeubflJcsX6g.png

TomVista

2020-01-06 17:52:31 +08:00

发错了 ![ls7mqI.png]( https://s2.ax1x.com/2020/01/06/ls7mqI.png)

TomVista

2020-01-06 17:53:23 +08:00

![ls7UZq.png]( https://s2.ax1x.com/2020/01/06/ls7UZq.png)

TomVista

2020-01-06 17:55:10 +08:00

测试代码

<body>
<div style="display:flex;">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="flex box"></div>
<div class="flex box"></div>
<div class="flex box"></div>
<div class="flex box"></div>

<style>
.box{
border: 1px red solid;
height: 20px;
width: 20px;
margin: 10px;
}
.flex{
display: flex;
}
</style>
</body>