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

V2EX = way to explore

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

现在注册

已注册用户请登录

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

flex

dispaly

元素

重叠

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

TomVista

2020 年 1 月 6 日

我搜的博客都说 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 年 1 月 6 日

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

TomVista

2020 年 1 月 6 日

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

rabbbit

2020 年 1 月 6 日

@TomVista
带 display: flex 的不是吗?

rabbbit

2020 年 1 月 6 日

TomVista

2020 年 1 月 6 日

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

TomVista

2020 年 1 月 6 日

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

TomVista

2020 年 1 月 6 日

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

TomVista

2020 年 1 月 6 日

测试代码

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