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

資深大佬 : TomVista 53

我搜的博客都说 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

低质量博客害人

大佬有話說 (8)

主資深大佬 : TomVista

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

@rabbbit 带有 display:flex 的元素的第一级子元素是 bfc. 带有 display:flex 的元素不是.
主資深大佬 : TomVista

@TomVista
带 display: flex 的不是吗?
資深大佬 : rabbbit
資深大佬 : rabbbit

我这里不是 https://i.loli.net/2019/12/25/PtqDeubflJcsX6g.png
主資深大佬 : TomVista

发错了 ![ls7mqI.png]( https://s2.ax1x.com/2020/01/06/ls7mqI.png)
主資深大佬 : TomVista

![ls7UZq.png]( https://s2.ax1x.com/2020/01/06/ls7UZq.png)
主資深大佬 : TomVista

测试代码

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