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

2020-01-06 17:04:02 +08:00
 TomVista
1746 次点击
所在节点    前端开发
9 条回复
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>

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/635533

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX