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

flex

dispaly

元素

重叠

9 replies • 2020-01-06 17:55:10 +08:00

1

TomVista

OP

Jan 6, 2020

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

低质量博客害人

2

rabbbit

Jan 6, 2020

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

3

TomVista

OP

Jan 6, 2020

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

4

rabbbit

Jan 6, 2020

@TomVista
带 display: flex 的不是吗?

5

rabbbit

Jan 6, 2020

6

TomVista

OP

Jan 6, 2020

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

7

TomVista

OP

Jan 6, 2020

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

8

TomVista

OP

Jan 6, 2020

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

9

TomVista

OP

Jan 6, 2020

测试代码

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